ayo/lion

History

CircleCI 564a90dad1 chore: release new versions - @lion/button@0.3.33 - @lion/calendar@0.2.11 - @lion/checkbox-group@0.1.73 - @lion/checkbox@0.1.66 - @lion/choice-input@0.2.43 - @lion/field@0.3.7 - @lion/fieldset@0.1.65 - @lion/form-system@0.0.81 - @lion/form@0.1.72 - @lion/input-amount@0.1.69 - @lion/input-date@0.1.66 - @lion/input-datepicker@0.2.11 - @lion/input-email@0.1.66 - @lion/input-iban@0.1.68 - @lion/input@0.1.65 - @lion/option@0.2.8 - @lion/popup@0.3.10 - @lion/radio-group@0.1.75 - @lion/radio@0.1.66 - @lion/select-rich@0.3.13 - @lion/select@0.1.63 - @lion/switch@0.1.6 - @lion/textarea@0.1.68 - @lion/tooltip@0.3.10 - @lion/validate@0.2.40		2019-11-06 11:23:14 +00:00
..
src	fix(select-rich): make readonly work	2019-10-11 16:46:27 +02:00
stories	fix(select-rich): make readonly work	2019-10-11 16:46:27 +02:00
test	fix(select-rich): make readonly work	2019-10-11 16:46:27 +02:00
CHANGELOG.md	chore: release new versions	2019-11-06 11:23:14 +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-11-06 11:23:14 +00:00
README.md	feat: add lion-select-rich	2019-07-25 17:21:36 +02: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';

Example

<lion-select-rich
  name="favoriteColor"
  label="Favorite color"
  .errorValidators=${[['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