GitHub

Dropdown

A menu, activated by a button, representing a set of actions or displaying a list of options for user selection.

Import

import { Dropdown } from '@frontile/collections';

Usage

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { Dropdown } from '@frontile/collections';

export default class Example extends Component {
  @action
  onAction(key: string) {
    // eslint-disable-next-line
    console.log('Click on key', key);
  }

  @action
  delete() {
    alert('delete');
  }

  <template>
    <Dropdown as |d|>
      <d.Trigger @intent="primary" @size="sm">Dropdown</d.Trigger>

      <d.Menu @onAction={{this.onAction}} @intent="primary" as |Item|>
        <Item @key="profile" @description="View my profile">
          My Provile
        </Item>
        <Item @key="settings" @shortcut="⌘⇧S">Settings</Item>
        <Item @key="notifications" @shortcut="⌘⇧N" @withDivider={{true}}>
          Notifications
        </Item>
        <Item @key="reset" @intent="danger" @class="text-danger">
          Reset Settings
        </Item>
        <Item
          @key="delete"
          @shortcut="⌘⇧D"
          @intent="danger"
          @class="text-danger"
          @onClick={{this.delete}}
        >
          Delete Account
        </Item>
      </d.Menu>
    </Dropdown>
  </template>
}

API

Dropdown

Element: HTMLUListElement

Arguments

Name Type Default Description
onClose * unknown -
closeOnItemSelect boolean true Whether the dropdown should close upon selecting an item.
flipOptions any -
middleware Array -
offsetOptions any 5
placement enum 'bottom-start' Placement of the menu when open
shiftOptions any -
strategy enum 'absolute'

Blocks

Name Type Default Description
default * Array -
Released under MIT License - Created by Josemar Luedke