Dropdown Button

Module Requirements

This module requires the "Font Awesome 5 Free" font to be available on the page

The npm package used for a given release can be found in package.json under optionalDependencies

Examples

HTML

<div id="dropdown-button-container"></div>

JavaScript

const items = [
  {
    text: 'Function #1',
    onClick: () => notify('Clicked Dropdown Button Action 1'),
  },
  {
    text: 'Function #2',
    onClick: () => notify('Clicked Dropdown Button Action 2'),
  },
  {
    text: 'Disabled',
    disabled: true,
    onClick: () => notify('Clicked Dropdown Button Action 3'),
  },
];

hx.select('#dropdown-button-container').set([
  hx.dropdownButton({ items, text: 'standard' }),
]);

HTML

<div id="dropdown-button-container-context"></div>

JavaScript

const itemsFull = [
  {
    text: 'A very long function #1',
    onClick: () => notify('Clicked Dropdown Button Action 1'),
  },
  {
    text: 'Function #2',
    onClick: () => notify('Clicked Dropdown Button Action 2'),
  },
  {
    text: 'Disabled',
    disabled: true,
    onClick: () => notify('Clicked Dropdown Button Action 3'),
  },
  {
    text: 'Link #1',
    onClick: '#link-1',
  },
  {
    text: 'Link #2',
    onClick: '#link-2',
  },
  {
    text: 'Disabled',
    disabled: true,
    onClick: '#link-3',
  },
];

const ddContexts = [undefined, 'primary', 'secondary'];
const ddContextButtons = ddContexts.map(type => hx.dropdownButton({
  type,
  items: itemsFull,
  text: type || 'standard',
}));

hx.select('#dropdown-button-container-context').set(ddContextButtons);

Api

Change Log

Functions

hx.dropdownButtonoptionsObject

Creates a dropdown button using the updated style with a downwards arrow to indicate that the button is a dropdown.

Arguments

options

Properties

itemsArray[Item]

The array of items that should be shown in the dropdown.

[
  {
    text: 'Text to display',
    onClick: '/url?query=123',
  },
  {
    text: 'Text to display',
    onClick: myActionFunction,
  },
  {
    text: 'Text to display',
    onClick: myActionFunction,
    disabled: true,
  }
]

Item

Properties

disabledBoolean

Whether the item is disabled

Default: false

onClickString / Function

The URL or function to use when clicking the item in the dropdown.

When this is a string, the item will be converted to a hyperlink to allow better cross-platform support for things like 'open in new tab' (e.g. on touch devices)

textString

The text to display on the item in the dropdown

sizeString

The button size. Can be 'small' or 'micro'. undefined is the default 'normal' button size.

Default: undefined

textString

The text to show on the button.

This can be set afterwards but is provided as an option to simplify construction of the dropdown button.

Default: ''

typeString

The button type to use. This can be either 'primary' or 'secondary'.

undefined is the default 'standard' button type.

Default: undefined