North Pittsburgh Meatpackers

    @forter/dropdown

    4.3.4 • Public • Published

    fc-dropdown

    Control for picking values from a list.

    ⚠️⚠️ This component is deprecated and might be unstable. please use fc-select or fc-popover. ⚠️⚠️ <fc-dropdown> makes use of flatMap, so users should take care to polyfill if they need to serve dropdowns to legacy browsers.

    Usage

    <fc-dropdown>
       <fc-dropdown-item>Eenie</fc-dropdown-item>
       <fc-dropdown-item>Meenie</fc-dropdown-item>
       <fc-dropdown-item>Miny</fc-dropdown-item>
       <fc-dropdown-item>Mo</fc-dropdown-item>
    </fc-dropdown>

    Examples

    <!-- header -->
    <fc-dropdown no-close-on-select>
       <fc-dropdown-header>Finance</fc-dropdown-header>
       <fc-dropdown-header>Support</fc-dropdown-header>
      </fc-dropdown>
    
    <!-- icon -->
    
    <fc-dropdown
        on-dropdown-opened="${onDropdownOpen}"
        on-dropdown-closed="${onDropdownClose}"
        on-select="${onSelect}">
      <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
      <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
      <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
      <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    
    <!-- filterableItems -->
    
    <fc-dropdown no-close-on-select no-close-on-focusout label="Users" multi>
       <fc-button slot="trigger" icon="user">Assign to User</fc-button>
    
       <fc-input slot="filter" label="Filter" flat>
         <fc-icon icon="search" slot="prefix"></fc-icon>
       </fc-input>
    
       <fc-dropdown-header>Finance</fc-dropdown-header>
    
       <fc-dropdown-header>Support</fc-dropdown-header>
    
       <fc-button slot="action" intent="apply">Assign</fc-button>
    </fc-dropdown>
    
    <!-- stayOpened -->
    <fc-dropdown
         no-close-on-select
         no-close-on-focusout
         on-dropdown-opened="${onDropdownOpen}"
         on-dropdown-closed="${onDropdownClose}"
         on-select="${onSelect}">
       <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    
    <!-- topLeft -->
    <fc-dropdown style="position: fixed; bottom: calc(100vh - 50px)">
       <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    
    <!-- topRight -->
    <fc-dropdown style="position: fixed; buttom: calc(100vh - 50px); left: calc(100vw - 50px);">
       <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    
    <!-- buttomLeft -->
    <fc-dropdown style="position: fixed; top: calc(100vh - 50px)">
       <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    
    <!-- buttomRight -->
    <fc-dropdown style="position: fixed; top: calc(100vh - 50px); left: calc(100vw - 50px);">
       <fc-dropdown-icon-item icon="star">Eenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="user">Meenie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="home">Minie</fc-dropdown-icon-item>
       <fc-dropdown-icon-item icon="add">Mo</fc-dropdown-icon-item>
    </fc-dropdown>
    import { html, render } from 'lit-html';
    import '@forter/dropdown';
    
    const itemTemplate = ({ icon, label = '' }) => html`
       <fc-dropdown-icon-item value="${label.toLowerCase()}">
         ${label}
       </fc-dropdown-icon-item>`
    
    const dropDownTemplate = items => html`
       <fc-dropdown
           \@dropdown-open="${onDropdownOpen}"
           \@dropdown-close="${onDropdownClose}"
           \@select="${onSelect}">
         ${items.map(itemTemplate)}
       </fc-dropdown>
    `;
    render(dropDownTemplate([
       { icon: 'star', label: 'Eenie' },
       { icon: 'home', label: 'Meenie' },
       { icon: 'user', label: 'Miny' },
       { icon: 'add', label: 'Mo }',
    ]), document.body)

    Properties

    Property Attribute Type Default Description
    delegateFilter delegate-filter boolean When true, instead of filtering the list client side,
    fire an event, in order to receive a new list from without.
    filter filter string
    filterPredicate (value: string, item: HTMLElement) => boolean Default predicate by which to filter items
    horizontalOffset horizontal-offset number 0 Number of pixels on the horizontal axis to offset the dropdown list by. example: 50
    label label string "Items" Label that describes the list of the items
    noCloseOnFocusout no-close-on-focusout boolean false When true, focusing outside the dropdown menu will not close the dropdown.
    noCloseOnSelect no-close-on-select boolean false When true, selecting an item will not close the dropdown.
    opened opened "dropdown-opened" | "dropdown-closed"
    triggerLabel trigger-label string Label for the default trigger
    verticalOffset vertical-offset number Number of pixels on the vertical axis to offset the dropdown list by. example: 50

    Events

    Event Description
    dropdown-closed fired when the dropdown closes
    dropdown-opened fired when the dropdown opens

    Slots

    Name Description
    dropdown content
    trigger custom trigger button (optional)

    CSS Custom Properties

    Property Description
    --fc-dropdown-horizontal-padding dropdown content horizontal-padding. default: 20px
    --fc-dropdown-width dropdown's width. default: auto

    fc-dropdown-item

    Control for picking values from a list.

    Usage

    <fc-dropdown-item value="Hello World"></fc-dropdown-item>

    Properties

    Property Attribute Type Default Description
    selected selected boolean false Whether the item is selected
    tabIndex number
    value value string Value for the item

    Events

    Event
    item-selected fired when an item is selected

    Slots

    Name

    CSS Custom Properties

    Property Description
    --fc-dropdown-item-justify flex justification for item content. default: space-between
    --fc-dropdown-item-padding-horizontal horizontal padding. default: 25px
    --fc-dropdown-item-padding-vertical vertical padding. default: 20px

    fc-dropdown-icon-item

    Just like a dropdown item, but with a stylish icon.

    Usage

    <fc-dropdown-icon-item icon="star" value="hello"></fc-dropdown-icon-item>

    Properties

    Property Attribute Type Default Description
    icon icon string The icon to use for the item
    selected selected boolean false Whether the item is selected
    tabIndex number
    value value string Value for the item

    Events

    Event
    item-selected fired when an item is selected

    Slots

    Name

    CSS Custom Properties

    Property Description
    --fc-dropdown-item-justify flex justification for item content. default: space-between
    --fc-dropdown-item-padding-horizontal horizontal padding. default: 25px
    --fc-dropdown-item-padding-vertical vertical padding. default: 20px

    Install

    npm i @forter/dropdown

    DownloadsWeekly Downloads

    3

    Version

    4.3.4

    License

    Apache-2.0

    Unpacked Size

    204 kB

    Total Files

    67

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart