Dropdown

The Dropdown component provides a user-friendly menu with selectable options. Use it to allow users to pick from a list of predefined choices.

Example:

Language

import { query, icons, Dropdown } from 'lakelib';

const dropdown = new Dropdown({
  root: query('.dropdown-root'),
  name: 'langType',
  downIcon: icons.get('down'),
  defaultValue: 'html',
  tooltip: 'Select language',
  width: '100px',
  menuType: 'list',
  menuItems: [
    { value: 'text', text: 'Plain text' },
    { value: 'css', text: 'CSS' },
    { value: 'html', text: 'HTML' },
    { value: 'javascript', text: 'JavaScript' },
  ],
  onSelect: value => {
    console.log(value);
  },
});
dropdown.render();

Alignment

import { query, icons, Dropdown } from 'lakelib';

const dropdown = new Dropdown({
  root: query('.dropdown-root'),
  name: 'align',
  icon: icons.get('alignLeft'),
  downIcon: icons.get('down'),
  tooltip: 'Alignment',
  menuType: 'list',
  menuItems: [
    {
      icon: icons.get('alignLeft'),
      value: 'left',
      text: 'Align left',
    },
    {
      icon: icons.get('alignCenter'),
      value: 'center',
      text: 'Align center',
    },
    {
      icon: icons.get('alignRight'),
      value: 'right',
      text: 'Align right',
    },
  ],
  onSelect: value => {
    console.log(value);
  },
});
dropdown.render();

Constructor

Creates a new Dropdown instance. It receives a key-value object with the following properties as its parameter.

root

Specifies the element where the dropdown will be appended.

Type: Nodes

name

Specifies the name attribute for the dropdown.

Type: string

menuType

Specifies the style of the dropdown menu.

Type: 'list' | 'icon' | 'character' | 'color'

menuItems

Specifies an array of menu items to display. Each item should include at least a value and text property.

Type: DropdownMenuItem

onSelect

Specifies the function triggered when an option is selected. Receives the selected value as its argument.

Type: function

icon Optional

Specifies custom icon for the dropdown.

Type: HTML string

accentIcon Optional

Specifies an accent icon used specifically for a color type.

Type: HTML string

downIcon Optional

Specifies an icon for the caret-down indicator.

Type: HTML string

defaultValue Optional

Specifies the default selected value when the dropdown is first rendered.

Type: string

tooltip Optional

Specifies the tooltip text for the dropdown button.

Type: string

width Optional

Specifies the width of the dropdown.

Type: string

locale Optional

Specifies custom translation functions for localization.

Type: TranslationFunctions

tabIndex Optional

Specifies the tab order of the dropdown.

Type: number

location Optional

Determines whether the toolbar is appended to the root or document.body element. When set to local, the toolbar is appended to the root element.

Type: 'local' | 'global'

Default: local

direction Optional

Sets the vertical position of the menu relative to the button. bottom places the menu below the button, top above it, or auto to decide automatically.

Type: 'top' | 'bottom' | 'auto'

Default: auto

menuWidth Optional

Specifies the width of the dropdown menu.

Type: string

menuHeight Optional

Specifies the height of the dropdown menu.

Type: string

menuCheck Optional

Determines if menu items are selectable. If set to false, the menu items will not be selectable.

Type: boolean

Instance properties

node Read only

The DOM element that contains the dropdown's contents.

• Type: Nodes

Example:

const dropdownNode = dropdown.node;

Instance methods

render()

Renders the dropdown to the DOM.

• Parameters:

  None.

• Return value:

  None.

Example:

dropdown.render();

unmount()

Removes the dropdown from the DOM and cleans up resources.

• Parameters:

  None.

• Return value:

  None.

Example:

dropdown.unmount();