Introduction
dropmic is a lightweight dropdown plugin written in pure javascript
- No dependencies required
- No extra files to download
- Fully customizable via CSS
- Simple API
Documentation
Installation
Method | Procedure |
---|---|
Bower | bower install dropmic --save |
NPM | npm install dropmic |
Yarn (obsolete since npm5) | yarn add dropmic |
Download | Download zip |
Then dropmic have some css you will have to add (feel free to custom it for a better integration in your UI):
Finally just link the dropmic's code at the end of your document:
<!-- Browser build -->
Or as a JS module:
// ES6 module build
Use
Create the base layout for your button
- Add
data-dropmic-btn
attribute to your button - Create a div with a
dropmic
css class - Add a
data-dropmic-direction
attribute to the div (default behavior:bottom-right
):
data-dropmic-direction="top-left"
data-dropmic-direction="top-right"
data-dropmic-direction="top-middle"
data-dropmic-direction="bottom-left"
data-dropmic-direction="bottom-right"
data-dropmic-direction="bottom-middle"
- You can also add a
data-dropmic
attribute to you div for target it.
Example:
click me quality content
Instantiate your new dropdown
var dropmic = document;
Add content
You can create the content by yourself or use the API (cf. below)
Use this template (<div class="dropmic-menu" aria-hidden="true">
is needed, otherwise you can completely customize his content)
click me Custom content label link label button
API
You can use the API to generate content and open or close your dropdown with JS:
Name | Parameter type(s) | Description |
---|---|---|
addLink(label, url) | string or int, string | Add a link |
addBtn(label, callback) | string or int, function | Add a button |
addLabel(label) | string or int | Add a text label |
setCustomContent(content) | string | Set a custom content |
updateTargetBtn(content) | string | Update target button content |
open() | Open your dropdown | |
close() | Close your dropdown |
Example:
dropmic;dropmic;dropmic;dropmic;
Options
Name | Type | Description |
---|---|---|
onOpen | function | Callback to execute when dropmic is open |
onClose | function | Callback to execute when dropmic is closed |
beforeOpen | function | Callback to execute before opening dropmic |
beforeClose | function | Callback to execute before closing dropmic |
Example:
var dropmic = document { dropmic; } { dropmic; };
Modify dropmic
- Setup dependencies:
npm i
(ornpm ci
if you don't want to impact package-lock) - Run hot-reloads server for development
npm run dev
- (Build for production
npm run build
)
Roadmap
- Add open and close public method in the API
- Add top-middle and bottom-middle direction
- A11y friendly (with keyboard navigation)
- Permit to update button content with dropdown is open
- Instantiate severals dropmic with one initialization command
- Permit to update a list item value
Licence
Released under the MIT LICENSE