Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/informatix8/access-dropdown
Auto-positioning accessible dropdown
https://github.com/informatix8/access-dropdown
a11y dropdown vanilla-javascript
Last synced: about 1 month ago
JSON representation
Auto-positioning accessible dropdown
- Host: GitHub
- URL: https://github.com/informatix8/access-dropdown
- Owner: informatix8
- Created: 2019-05-10T21:31:46.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-25T14:21:56.000Z (over 5 years ago)
- Last Synced: 2024-09-26T14:48:23.461Z (5 months ago)
- Topics: a11y, dropdown, vanilla-javascript
- Language: HTML
- Homepage: https://access-dropdown.com/
- Size: 47.9 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Access Dropdown
Auto-positioning accessible dropdown.
Examples and the API are in the [documentation](https://access-dropdown.com/).
## Features
- Auto-positioning with `requestAnimationFrame`: the dropdown tries to stay on screen
- Click outside to dismiss
- Press `Esc` to dismiss
- Click the `X` to dismiss on small screens
- When focus finally leaves the dropdown’s content when using `Tab`, the dropdown is dismissed
- Inline styles can be disabled
- After dismissal, focus is returned to the last focused element or a designated element
- Pre and post user defined functions can be called during significant events
## Usage
### Install
```shell
npm install @informatix8/access-dropdown --save-dev
```
### CDN
```html
```
### Vanilla Javascript
```javascript
var dropdowns = document.querySelectorAll('.my-dropdown');
for (var i = 0; i < dropdowns.length; i++) {
var dropdown = new AccessDropdown({
el: dropdowns[i],
callbacks: {
preOpen: function () { //user callback
console.log('before it is opened');
},
postClose: function (reason) { //user callback
console.log('dropdown was closed for', reason);
}
}
});
}
```
```html
Hello Trigger
```
## Development
```shell
npm run dev
```
## Build
```shell
npm run build
```
## Release
```shell
npm run build
git tag -a vX.Y.Z
git push origin master
git push origin --tags
npm publish --access=public .
```