A simple select box providing the possibility to select a single item out of a list of available items.

DOM example:

Hierarchy (view full)

Constructors

Accessors

  • get onDisabled(): Event<Component<Config>, NoArgs>
  • Gets the event that is fired when the component is disabling. See the detailed explanation on event architecture on the #componentEvents events list.

    Returns Event<Component<Config>, NoArgs>

  • get onEnabled(): Event<Component<Config>, NoArgs>
  • Gets the event that is fired when the component is enabling. See the detailed explanation on event architecture on the #componentEvents events list.

    Returns Event<Component<Config>, NoArgs>

Methods

  • Adds an item to this selector by doing a sorted insert or by appending the element to the end of the list of items. If an item with the specified key already exists, it is replaced.

    Parameters

    • key: string

      the key of the item to add

    • label: LocalizableText

      the (human-readable) label of the item to add

    • sortedInsert: boolean = false

      whether the item should be added respecting the order of keys

    • ariaLabel: string = ''

      custom aria label for the listItem

    Returns void

  • Configures the component for the supplied Player and UIInstanceManager. This is the place where all the magic happens, where components typically subscribe and react to events (on their DOM element, the Player, or the UIInstanceManager), and basically everything that makes them interactive. This method is called only once, when the UIManager initializes the UI.

    Subclasses usually overwrite this method to add their own functionality.

    Parameters

    • player: PlayerAPI

      the player which this component controls

    • uimanager: UIInstanceManager

      the UIInstanceManager that manages this component

    Returns void

  • Disables the component. This method basically transfers the component into the disabled state. Actual disabling is done via CSS or child components. (e.g. Button needs to unsubscribe click listeners)

    Returns void

  • Enables the component. This method basically transfers the component into the enabled state. Actual enabling is done via CSS or child components. (e.g. Button needs to subscribe click listeners)

    Returns void

  • Initializes the component, e.g. by applying config settings. This method must not be called from outside the UI framework.

    This method is automatically called by the UIInstanceManager. If the component is an inner component of some component, and thus encapsulated abd managed internally and never directly exposed to the UIManager, this method must be called from the managing component's #initialize method.

    Returns void

  • Releases all resources and dependencies that the component holds. Player, DOM, and UIManager events are automatically removed during release and do not explicitly need to be removed here. This method is called by the UIManager when it releases the UI.

    Subclasses that need to release resources should override this method and call super.release().

    Returns void

  • Selects an item from the items in this selector.

    Parameters

    • key: string

      the key of the item to select

    Returns boolean

    true is the selection was successful, false if the selected item is not part of the selector

  • Synchronize the current items of this selector with the given ones. This will remove and add items selectively. For each removed item the ItemRemovedEvent and for each added item the ItemAddedEvent will be triggered. Favour this method over using clearItems and adding all items again afterwards.

    Parameters

    Returns void