ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/select-rich
History
CircleCI 2b2e1eaff5 chore: release new versions 
- @lion/button@0.5.5
 - @lion/form-system@0.4.5
 - @lion/select-rich@0.10.3
2020-02-14 14:19:15 +00:00
..
src feat: flatten modelValue and remove checkedValue 2020-02-06 16:06:52 +01:00
stories feat: improved storybook demos 2020-01-13 13:58:03 +01:00
test feat: flatten modelValue and remove checkedValue 2020-02-06 16:06:52 +01:00
CHANGELOG.md chore: release new versions 2020-02-14 14:19:15 +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 2020-02-14 14:19:15 +00:00
README.md feat: improved storybook demos 2020-01-13 13:58:03 +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.

Live Demo/Documentation

See our storybook for a live demo and API documentation

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">
  <lion-options slot="input">
    <lion-option .choiceValue=${'red'}>Red</lion-option>
    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
  </lion-options>
</lion-select-rich>