elab

Multiple selection with just markup.

Demo / CodePen

Installation

via npm (with a module bundler)

$ npm install elab

import 'elab/simple/simple.css' // or 'elab/material/material.css'
import 'elab/simple/simple.js'  // or 'elab/material/material.js'

via CDN (jsDelivr)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/simple/simple.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/simple/simple.js"></script>
<!-- or
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/material/material.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/material/material.js"></script>
-->

Download

simple.css simple.js

material.css material.js

Usage

<!-- 1. Load CSS and JS. -->
<link rel="stylesheet" href="elab/simple.css" />
<script src="elab/simple.js"></script>

<!-- 2. Place an element having "elab" class and `tabindex` attribute.
        [Optional] Add "elab-wrap" class to apply word-wrap.
        [Optional] Listen to "change" and "close" events using `addEventListener()` or `on-` attributes.
        `event.detail.values` is an array having selected values. -->
<div
  class="elab elab-wrap"
  tabindex="0"
  onchange="console.log(arguments[0].detail.values)"
  onclose="console.log(arguments[0].detail.values)"
>
  <ul>
    <!-- 3. [Optional] Place an item having `data-selected-all` to indicate or toggle all items. -->
    <li data-selected-all>All</li>

    <!-- 4. Place items having `data-value` with `data-selected` or `data-disabled` as appropriate. -->
    <li data-value="cupcake">Cupcake</li>
    <li data-value="donut">Donut</li>
    <li data-value="eclair" data-selected>Eclair</li>
    <li data-value="froyo" data-disabled>Froyo</li>
    <li data-value="gingerbread">Gingerbread</li>
    <li data-value="honeycomb">Honeycomb</li>
    <li data-value="ice" data-selected>Ice</li>

    <!-- 5. [Optional] Place an item having `data-placeholder` at last to display the placeholder. -->
    <li data-placeholder>Select...</li>
  </ul>

  <!-- 6. [Optional] Place an icon to indicate this is a dropdown, such as "▾". -->
  <div style="padding: 0 0.5em;">▾</div>
</div>

License

WTFPL