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 |