Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
dropmic is a lightweight dropdown plugin written in pure javascript
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):
<link rel="stylesheet" href="dist/dropmic.min.css">
Finally just link the dropmic's code at the end of your document:
<!-- Browser build -->
<script src="dist/dropmic.min.js"></script>
Or as a JS module:
// ES6 module build
import dropmic from 'dropmic'
data-dropmic-btn
attribute to your buttondropmic
css classdata-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"
data-dropmic
attribute to you div for target it.Example:
<div class="dropmic" data-dropmic="42"
data-dropmic-direction="bottom-right">
<button data-dropmic-btn>click me</button>
<div class="dropmic-menu" aria-hidden="true">quality content</div>
</div>
var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));
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)
<div class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
<button data-dropmic-btn>click me</button>
<div class="dropmic-menu" aria-hidden="true">
<div class="dropmic-menu__custom">Custom content</div>
<ul class="dropmic-menu__list" role="menu">
<li class="dropmic-menu__listItem" role="menuitem">
<a class="dropmic-menu__listContent" href="http://example.com" tabindex="-1">label link</a>
</li>
<li class="dropmic-menu__listItem" role="menuitem">
<button class="dropmic-menu__listContent" tabindex="-1">label button</button>
</li>
</ul>
</div>
</div>
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.setCustomContent("toto custom");
dropmic.addLink('link label', 'http://example.com');
dropmic.addBtn('close dropdown', function() {
dropmic.close();
});
dropmic.addLabel('text label');
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 = new Dropmic(document.querySelector('[data-dropmic="1"]'), {
onOpen: function() {
dropmic.updateTargetBtn("Click to close");
},
onClose: function() {
dropmic.updateTargetBtn("Bottom right (default)");
}
});
npm i
(or npm ci
if you don't want to impact package-lock)npm run dev
npm run build
)Released under the MIT LICENSE
FAQs
A lightweight dropdown plugin
The npm package dropmic receives a total of 20 weekly downloads. As such, dropmic popularity was classified as not popular.
We found that dropmic demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.