Nondeterministic Palindrome Machine

    @miraidesigns/select

    1.0.3 • Public • Published

    Selects

    Selects show a set of options the user can choose one from.
    Serves as an alternative to the native <select> element.
    Requires the List and Menu modules.


    HTML

    <div class="mdf-select">
        <button class="mdf-select__button" aria-haspopup="listbox" aria-labelledby="select-label select-text">
            <span id="select-label" class="mdf-select__label">Select</span>
            <span id="select-text" class="mdf-select__text"></span>
    
            <span class="mdf-select__icon">
                <svg class="mdf-icon" viewBox="0 0 24 24" aria-hidden="true">
                    <use href="icons.svg#arrow-keyboard"></use>
                </svg>
            </span>
        </button>
    
        <div class="mdf-select__menu mdf-menu">
            <ul class="mdf-list" role="listbox" aria-labelledby="select-label" tabindex="-1">
                <li class="mdf-list__item mdf-list__item--selected" role="option" data-value="1">Option 1</li>
                <li class="mdf-list__item" role="option" data-value="2">Option 2</li>
                <li class="mdf-list__item" role="option" data-value="3">Option 3</li>
            </ul>
    
            <input class="mdf-select__input" type="hidden" name="option" />
        </div>
    </div>

    Sass

    // Include default styles without configuration
    @forward '@miraidesigns/select/styles';
    // Configure appearance
    @use '@miraidesigns/select' with (
        $variable: value
    );
    
    @include select.styles();

    TypeScript

    import { MDFSelect } from '@miraidesigns/select';
    
    new MDFSelect(document.querySelector('.mdf-select'));

    Attributes

    Please see the WAI-ARIA page for attributes and best practices regarding listboxes.

    Name Element Description
    data-value <li> The option's value, equivalent to a native <option value=""> attribute.

    Classes

    Name Type Description
    mdf-select Parent Select container element
    mdf-select__button Child / Parent Select button element that activates the menu
    mdf-select__label Child Select label element
    mdf-select__label--floating Modifier Moves the label above the button
    mdf-select__text Child Select text element
    mdf-select__icon Child Select arrow icon element
    mdf-select__input Child Select hidden input element, holds the selected value
    mdf-list__item--selected Modifier Marks the list item as selected

    Events

    Name Data Description
    MDFSelect:opened null Fires when the select menu opens
    MDFSelect:changed {item: HTMLElement, text: string, value: string} Fires whenever the active select item changes. Includes the item itself, its text and input value
    MDFSelect:closed null Fires when the select menu closes

    Properties

    Name Type Description
    .container HTMLElement Returns the select container element
    .items HTMLElement[] Returns an Array holding all menu items
    .menu HTMLElement Returns the menu element
    .text string Get or set the select button text
    .value string Get or set the select hidden input value
    .isActive() (): boolean Returns wether or not the menu is currently visible
    .getSelectedElem() (): HTMLElement Returns the currently selected item
    .setSelectedElem(elem) (HTMLElement): void Set the given element as selected

    Install

    npm i @miraidesigns/select

    DownloadsWeekly Downloads

    1

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    28.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • miraidesigns