https://github.com/luncheon/elab

Multiple selection with just markup.
https://github.com/luncheon/elab

multiselect select select-multiple selectbox vanilla-js

Last synced: 22 days 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 4 years ago)
• Default Branch: main
• Last Pushed: 2021-08-20T04:56:24.000Z (over 3 years ago)
• Last Synced: 2024-12-15T11:36:31.812Z (27 days ago)
• Topics: multiselect, select, select-multiple, selectbox, vanilla-js
• Language: TypeScript
• Homepage: https://luncheon.github.io/elab/
• Size: 299 KB
• Stars: 1
• Watchers: 2
• 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/[email protected]/simple/simple.css)

[simple.js](https://cdn.jsdelivr.net/npm/[email protected]/simple/simple.js)

[material.css](https://cdn.jsdelivr.net/npm/[email protected]/material/material.css)

[material.js](https://cdn.jsdelivr.net/npm/[email protected]/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)