@forter/dropdown NPM

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`