@forter/dropdown

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