Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

dropmic

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dropmic - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

yarn.lock

2

package.json
{
"name": "dropmic",
"version": "0.2.4",
"version": "0.2.5",
"description": "A lightweight dropdown plugin",

@@ -5,0 +5,0 @@ "main": "dist/dropmic.js",

@@ -20,2 +20,3 @@ # dropmic

NPM | npm install dropmic --save
Yarn | yarn add dropmic
Download | [Download zip](https://github.com/agence-webup/dropmic/archive/master.zip)

@@ -37,6 +38,6 @@

#### Create de base layout for your button
#### Create the base layout for your button
1. Add `data-dropmic-btn` attribute to your button
2. Create a span with a `dropmic` css class
3. Add a `data-dropmic-direction` attribute to the span (default behavior: `bottom-right`):
2. Create a div with a `dropmic` css class
3. Add a `data-dropmic-direction` attribute to the div (default behavior: `bottom-right`):

@@ -50,13 +51,13 @@ - `data-dropmic-direction="top-left"`

4. You can also add a `data-dropmic` attribute to you span for target it.
4. You can also add a `data-dropmic` attribute to you div for target it.
Example:
```
<span class="dropmic" data-dropmic="42"
<div class="dropmic" data-dropmic="42"
data-dropmic-direction="bottom-right">
<button data-dropmic-btn>click me</button>
</span>
</div>
```
#### Instanciate your new dropdown
#### Instantiate your new dropdown
```

@@ -71,3 +72,3 @@ var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));

```
<span class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
<div class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
<button data-dropmic-btn>click me</button>

@@ -85,3 +86,3 @@ <div class="dropmic-menu" aria-hidden="true">

</div>
</span>
</div>
```

@@ -113,3 +114,3 @@ - You can use the API to generate content and open or close your dropdown with JS :

- [x] A11y friendly (with keyboard navigation)
- [ ] Instanciate severals dropmic with one initialization command
- [ ] Instantiate severals dropmic with one initialization command
- [ ] Permit to update a list item value

@@ -116,0 +117,0 @@ - [ ] Permit to update button content with dropdown is open

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc