mwg API
    Preparing search index...

    Class Dropdown

    A closed button that opens a list of options - the "option button" a settings row or a scenario picker drops down.

    This is the model only; DropdownView is the ready-made widget over it. A game with its own look drives the model directly with open/move/confirm and onChange.

    Renderer-free, like TabbedList: the state is the whole widget's mind, and a game draws the button's label and the open list wherever its own layout wants them. The rule worth naming is that opening restores the highlight to the current selection, so the first arrow key does not jump from wherever the highlight was last, and a disabled option is skipped by the highlight exactly as ListView skips one.

    import { Dropdown } from '@datamoc/mwg/two-d/ui';

    const difficulty = new Dropdown({
      options: [{ id: 'easy', label: 'Easy' }, { id: 'normal', label: 'Normal' }],
    });
    difficulty.open();
    difficulty.move(1);
    difficulty.confirm();
    console.log(difficulty.selected?.id); // 'normal'
    Index
    constructor
    onChange
    disabled highlight isOpen options selected selectedIndex
    cancel close confirm move open setDisabled setHighlight setOptions toggleOpen
    onChange: Signal<{ index: number; option: DropdownOption }> = ...
    • get highlight(): number

      the row an open list has highlighted, which is what a confirm would take

      Returns number

    • takes the highlighted row: closes, selects it, and fires onChange when it moved

      Returns boolean

    • moves the highlight by delta rows, skipping disabled entries and wrapping at both ends

      Parameters

      • delta: number

      Returns void

    • Opens the list and highlights index, if it is enabled, so setHighlight(i) then confirm() is a whole programmatic pick. While already open it only moves the highlight; a disabled dropdown does not open.

      Parameters

      • index: number

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods