ayo/lion

History

CircleCI e51bf720e5 chore: release new versions - @lion/button@0.4.4 - @lion/calendar@0.5.5 - @lion/checkbox-group@0.4.2 - @lion/checkbox@0.2.12 - @lion/choice-input@0.4.10 - @lion/dialog@0.3.1 - @lion/field@0.7.0 - @lion/fieldset@0.5.5 - @lion/form-system@0.2.13 - @lion/form@0.3.12 - @lion/input-amount@0.4.1 - @lion/input-date@0.4.1 - @lion/input-datepicker@0.7.1 - @lion/input-email@0.4.1 - @lion/input-iban@0.4.1 - @lion/input@0.4.1 - @lion/option@0.3.10 - @lion/overlays@0.10.0 - @lion/radio-group@0.4.3 - @lion/radio@0.2.12 - @lion/select-rich@0.8.5 - @lion/select@0.4.1 - @lion/switch@0.4.0 - @lion/textarea@0.4.1 - @lion/tooltip@0.6.0 - @lion/validate@0.5.3		2019-12-13 14:23:06 +00:00
..
src	fix: no longer use overlay templates	2019-12-01 16:03:04 +01:00
stories	fix(select-rich): keyboard navigation should handle scrolling	2019-11-22 17:01:59 +01:00
test	feat: integrate and pass automated a11y testing	2019-12-03 15:15:01 +01:00
CHANGELOG.md	chore: release new versions	2019-12-13 14:23:06 +00:00
index.js	feat: update to latest overlay system	2019-10-10 17:14:49 +02:00
lion-options.js	feat: add lion-select-rich	2019-07-25 17:21:36 +02:00
lion-select-invoker.js	feat: add lion-select-rich	2019-07-25 17:21:36 +02:00
lion-select-rich.js	feat: add lion-select-rich	2019-07-25 17:21:36 +02:00
package.json	chore: release new versions	2019-12-13 14:23:06 +00:00
README.md	feat: finalize validation and adopt it everywhere	2019-11-18 15:30:08 +01:00

README.md

Select Rich

lion-select-rich component is a 'rich' version of the native <select> element. It allows to provide fully customized options and a fully customized invoker button. The component is meant to be used whenever the native <select> doesn't provide enough styling/theming/user interaction opportunities.

Its implementation is based on the following Design pattern: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Features

fully accessible
flexible api
fully customizable option elements
fully customizable invoker element
Mimics native select interaction mode (windows/linux and mac)

How to use

Installation

npm i --save @lion/select-rich

import '@lion/select-rich/lion-select-rich.js';
import '@lion/select-rich/lion-options.js';
import '@lion/option/lion-option.js';

// validator import example
import { Requred } from '@lion/validate';

Example

<lion-select-rich
  name="favoriteColor"
  label="Favorite color"
  .validators=${[new Required()]}
>
  <lion-options slot="input">
    <lion-option .choiceValue=${'red'}>Red</lion-option>
    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
  </lion-options>
</lion-select-rich>

You can also set the full modelValue for each option.

  <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>

You can get/set the the checkedIndex and checkedValue

const el = document.querySelector('lion-select-rich');
console.log(el.checkedIndex); // 1
console.log(el.checkedValue); // 'hotpink'
console.log(el.modelValue); // [{ value: 'red', checked: false }, { value: 'hotpink', checked: true }]

You can provide an invoker rendering a custom invoker that gets the selected value(s) as an input property .selectedElement

<lion-select-rich>
  <my-invoker-button slot="invoker"></my-invoker-button>
  <lion-options slot="input">
    ...
  </lion-options>
</lion-select-rich>

Other Resources

Design Considerations