https://github.com/luncheon/elab
Multiple selection with just markup.
https://github.com/luncheon/elab
multiselect select select-multiple selectbox vanilla-js
Last synced: 10 months ago
JSON representation
Multiple selection with just markup.
- Host: GitHub
- URL: https://github.com/luncheon/elab
- Owner: luncheon
- License: wtfpl
- Created: 2021-03-10T10:05:47.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-20T04:56:24.000Z (over 4 years ago)
- Last Synced: 2025-04-02T12:38:49.550Z (11 months ago)
- Topics: multiselect, select, select-multiple, selectbox, vanilla-js
- Language: TypeScript
- Homepage: https://luncheon.github.io/elab/
- Size: 299 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# elab
Multiple selection with just markup.
[Demo](https://luncheon.github.io/elab/index.html) / [CodePen](https://codepen.io/luncheon/pen/qBqQMjg)
## Installation
### via [npm](https://www.npmjs.com/package/elab) (with a module bundler)
```sh
$ npm install elab
```
```js
import 'elab/simple/simple.css' // or 'elab/material/material.css'
import 'elab/simple/simple.js' // or 'elab/material/material.js'
```
### via CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/elab))
```html
```
### Download
[simple.css](https://cdn.jsdelivr.net/npm/elab@0.3.0/simple/simple.css)
[simple.js](https://cdn.jsdelivr.net/npm/elab@0.3.0/simple/simple.js)
[material.css](https://cdn.jsdelivr.net/npm/elab@0.3.0/material/material.css)
[material.js](https://cdn.jsdelivr.net/npm/elab@0.3.0/material/material.js)
## Usage
```html
- All
- Cupcake
- Donut
- Eclair
- Froyo
- Gingerbread
- Honeycomb
- Ice
- Select...
▾
{
const element = document.querySelector('.elab')
element.addEventListener('change', event => console.log('change', event.detail.values))
element.addEventListener('close', event => console.log('close', event.detail.values))
}
```
## License
[WTFPL](http://www.wtfpl.net)