Class HyloSelect

Adds accessibility functionality to select elements. Wrap the select element with the hylo-select component.

Properties

labelId selectId selectLabel textNothingSelected textSelected

Methods

setValue

Events

hyloHasFocus

Properties

labelId

labelId: string

If you bundled the component with an ion-label component under an ion-item, you can force the id of the ion-label to be this value. If selectLabel is not set, the attribute aria-labelledby will be set accordingly.

selectId

selectId: string

The id of the wrapped select element.

selectLabel

selectLabel: string

The aria-label value given to the wrapped selectbox field.

textNothingSelected

textNothingSelected: string = 'nichts ausgewählt'

Text announced in a screen reader when no value is selected.

textSelected

textSelected: string = 'ausgewählt'

Text used in a screen reader to announce selected values.

Methods

setValue

  • setValue(value): Promise<void>

  • Sets the value of the enclosed select element. Use it instead of setting the value directly like select.value = ...

    Parameters

    • value: string

    Returns Promise<void>

Events

hyloHasFocus

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc