Su-Dropdown

Dropdown component.

$3

``
yarn install @sushi-ui/su-dropdown

or

npm install @sushi-ui/su-dropdown
`

$3

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

or

`html


`

$3

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

`hmtl


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

$3

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

$3

#### toggle()

Show/hide dropdown

#### show()

Show dropdown

#### hide()

Hide dropdown

#### destroy()

Remove all event listeneres from the dropdown component.

$3

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