
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
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 10 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.