@sushi-ui/su-dropdown NPM

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'

<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	-