Miss any of our Open RFC calls?Watch the recordings here! »

@forter/dropdown

4.2.10 • Public • Published

fc-dropdown

Control for picking values from a list.

<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

526

Version

4.2.10

License

Apache-2.0

Unpacked Size

197 kB

Total Files

67

Last publish

Collaborators

  • avatar
  • avatar
  • avatar