Su-Dropdown

Dropdown component.

Installing

yarn install @sushi-ui/su-dropdown

or

npm install @sushi-ui/su-dropdown

Setup

import '@sushi-ui/su-dropdown/lib/su-dropdown.css'
import SuDropdown from '@sushi-ui/su-dropdown'

or

<link rel="stylesheet" href="node_modules/@sushi-ui/su-dropdown/lib/su-dropdown.css">
<script src="node_modules/@sushi-ui/su-dropdown/lib/su-dropdown.js"></script>

Getting started

The .su-Dropdown and .su-Dropdown-content classes are mandatory in the markup. The .su-Dropdown-content element needs to be sibling to the trigger element. Only the trigger element and the element with class .su-Dropdown-content must be inside the .su-Dropdown wrapper element. Feel free to style the su-Dropdown-content element.

Minimum HTML markup

<div class="su-Dropdown">
  <button>trigger</button>
  <div class="su-Dropdown-content">
    // dropdown content
  </div>
</div>

Create a new dropdown instance

const el = document.querySelector('.su-Dropdown')
const dropdown = new SuDropdown(el, options)

Options

| Prop | Type | Default | Valid options | Desc | | --------------------- | -------------------- | ---------------- | ------------------------------------------------- | -------------------------------------------- | | offsetX | Number | 0 | Any number | - | | offsetY | Number | 0 | Any number | - | | padding | Number | 16 | Any number | Padding from boundary element | | boundaries | String,HTMLElement | viewport | scrollParent, window, viewport or any DOM element | | placement | String | bottom-start | auto, top, right, bottom, left | Option can also have modifier (-start, -end) | | closeOnClickInside | Boolean | false | true/false | - | | closeOnClickOutside | Boolean | true | true/false | - |

API

toggle()

Show/hide dropdown

show()

Show dropdown

hide()

Hide dropdown

destroy()

Remove all event listeneres from the dropdown component.

Events

Dispatches from the dropdown node element

show

Triggers on show

hide

Triggers on show

License

This project is licensed under the MIT License - see the LICENSE.md file for details