@sushi-ui/su-dropdown

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