Class HyloDropdown

A dropdown.

Place hylo-dropdown-item components inside the component to define the elements of the dropdown. Place a hylo-dropdown-header before the hylo-dropdown-item components to create a header. A dropdown does not need to have a header necessarily.

The header and/or item components don't have to be direct children of the hylo-dropdown component. E.g. you could wrap them into hylo-accessibility components like hylo-accessibility-list to add more functionality. You have to make sure that the ancestor of the header and the ancestor(s) of the items, which are the direct children of the hylo-dropdown component, are not the same.

To get accessibility features out of the box use hylo-accessibility-dropdown.

You can preselect an item by setting it "selected" while creating the dropdown or by giving the hylo-dropdown component a value. The component will automaticly select the item with the same value.

You can change the selected item by setting a not selected item "selected" or change the value of the component. The component will automaticly select the item with the same value.

To open/close the dropdown without triggering the transition just add/remove the css class "open".

Listens to the event "hyloAccessibilityListEscape" to close the dropdown when necessary.

Properties

noValueHeader stayOpen value

Methods

close open toggle triggerPrimaryAction update

Events

hyloClosing hyloOpening hyloValueChanged hyloValueStayed

Properties

noValueHeader

noValueHeader: string

If set and no value is set/selected, this phrase is shown in the header. Otherwise the first item will get selected.

Can also be used to set a "none" value of a dropdown untill an item gets selected, even if the dropdown does not have a header.

stayOpen

stayOpen: boolean = false

Should the dropdown stay open?

value

value: string

The value of the dropdown. Represents the value of the selected dropdown item.

Methods

close

  • close(): Promise<void>

  • Closes the dropdown.

    Returns Promise<void>

open

  • open(): Promise<void>

  • Opens the dropdown.

    Returns Promise<void>

toggle

  • toggle(): Promise<void>

  • Toggles the dropdown between being open or closed.

    Returns Promise<void>

triggerPrimaryAction

  • triggerPrimaryAction(): Promise<void>

  • Triggers the primary action which is simply triggering the primary action of the header.

    Returns Promise<void>

update

  • update(item_selection?): Promise<void>

  • Updates the component. Needs to be called when subcomponents where added or removed ("hylo-dropdown-header", "hylo-dropdown-item").

    Parameters

    • Optional item_selection: boolean

      if set, a possibly selected item will set/define the value of the dropdown (otherwise the value will select an item)

    Returns Promise<void>

Events

hyloClosing

hyloClosing: EventEmitter<any>

Fires when the dropdown gets closed.

hyloOpening

hyloOpening: EventEmitter<any>

Fires when the dropdown gets opened.

hyloValueChanged

hyloValueChanged: EventEmitter<string>

Fires when the value changed. Emits the new value.

hyloValueStayed

hyloValueStayed: EventEmitter<any>

Fires when an already selected item was clicked.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc