Version 0.40.0

UI Organisms

Dropdowns


CSS component

Default dropdown

Use your own style or insert other components inside it.

Dropdown
<div class="sui-o-dropdown as--open">
    Dropdown
</div>
Link
Link disabled
<div class="sui-o-dropdown as--open">
    <a href="#" tabindex="-1" class="sui-o-dropdown__link">
        Link
    </a>
    <button tabindex="-1" class="sui-o-dropdown__link">
        Button
    </button>
    <button tabindex="-1" class="sui-o-dropdown__link as--active">
        Active element
    </button>
    <hr class="sui-o-dropdown__spacer">
    <a href="#" tabindex="-1" class="sui-o-dropdown__link as--disabled">
        Link disabled
    </a>
    <button tabindex="-1" class="sui-o-dropdown__link" disabled>
        Button disabled
    </button>
</div>

JS component

Example

Link
Link disabled

How to use

Add the data-sui-o-dropdown="myDropdown" attribute on your button (where myDropdown is the ID of the dropdown),

<button class="sui-a-button" data-sui-o-dropdown="myDropdown">
    ...
</button>

Then add the Dropdown HTML,

<div class="sui-o-dropdown" id="myDropdown">
    ...
</div>

And enable the JS plugin.

import { Dropdown } from 'saagie-ui';

const myElement = document.getElementbyId('myDropdown');

new Dropdown(myElement, { /* options */ }).init();

Options

Default options:

{              
    target: targetElement, // Default: [data-sui-o-dropdown="/* Current Dropdown Id */"]
    openClass: 'as--open',
    dataAttrBase: 'data-sui-o-dropdown',
    dataAttrSuffixToggle: '',
    dataAttrSuffixOpen: '-open',
    dataAttrSuffixClose: '-close',
    dataAttrSuffixConfirm: '-confirm',
    dataAttrClicksEnabled: true,
    htmlToBodyEnabled: true,
    focusRecoverEnabled: true,
    keysEnabled: true,
    confirmOnEnterKey: false,
    closeOnEscapeKey: true,
    clickOutsideEnabled: true,
    placement: 'bottom-start',
    itemClass: 'sui-o-dropdown__link',
    itemDisabledClass: 'as--disabled',
    itemSelectedClass: 'as--selected',
    onInit: function () {},
    onOpen: function () {},
    onConfirm: function () {},
    onClose: function () {},
    onEnterKey: function () {},
    onEscapeKey: function () {},
    onDestroy: function () {},
}

Methods

init()

Init the dropdown.

const dropdown = new Dropdown(myElement, { /* options */ }).init();

toggle()

Open/Close the dropdown.

dropdown.toggle();

open()

Open the dropdown.

dropdown.open();

close()

Close the dropdown.

dropdown.close();

bindClickOutside() / unbindClickOutside()

Add / Remove event listener click outside the component.

dropdown.bindClickOutside();
dropdown.unbindClickOutside();

bindDataClicks() / unbindDataClicks()

Add / Remove event listeners for data attributes clicks.

dropdown.bindDataClicks();
dropdown.unbindDataClicks();

bindEvents() / unbindEvents()

Add / Remove event listeners for 'toggle', 'open', 'close', 'confirm', 'destroy' events.

dropdown.bindEvents();
dropdown.unbindEvents();

bindKeys() / unbindKeys()

Add / Remove event listeners for keys inputs.

dropdown.bindKeys();
dropdown.unbindKeys();

destroy()

Destroy all eventListeners.

dropdown.destroy();

React

Name: saagie-ui/organisms/Dropdown

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem, DropdownSpacer } from 'saagie-ui/react';

class DropdownExample extends React.Component {
  state = {
    dropdownOpen: false,
  };

  toggle = () => {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen,
    });
  }

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} onToggle={this.toggle}>
        <DropdownToggle>
          Open dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem isLink href="#">Link</DropdownItem>
          <DropdownItem>Button</DropdownItem>
          <DropdownItem isActive>Active element</DropdownItem>
          <DropdownItem isLink isDisabled href="#">Link disabled</DropdownItem>
          <DropdownSpacer />
          <DropdownItem isDisabled>Button disabled</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

export default DropdownExample;

Arguments

Params Type Details
Dropdown params
children node Children elements.
className (optional) string Custom CSS class names.
isOpen (optional) bool True for as--open behavior.
onToggle (optional) func Pass current state to toggle dropdown.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
DropdownItem params
children node Children elements.
tag func,string Pass a Component like react-router Link or simple string to override default button element.
className (optional) string Custom CSS class names.
isActive (optional) bool True for as--active behavior.
isDisabled (optional) bool True for as--disabled behavior.
isLink (optional) bool True for as--link behavior.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
DropdownMenu params
children node Children elements.
className (optional) string Custom CSS class names.
placement (optional) string change dropdown placement refer to Popper placement
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
DropdownSpacer params
className (optional) string Custom CSS class names.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.
DropdownToggle params
children node Children elements.
className (optional) string Custom CSS class names, you can use all Button CSS class.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.