Control for picking values from a list.
<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>
<!-- 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)
Control for picking values from a list.
<fc-dropdown-item value="Hello World"></fc-dropdown-item>
Just like a dropdown item, but with a stylish icon.
<fc-dropdown-icon-item icon="star" value="hello"></fc-dropdown-icon-item>