ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/select-rich
History
CircleCI af03fd41b0 chore: release new versions 
- @lion/checkbox-group@0.8.4
 - @lion/choice-input@0.7.6
 - @lion/form-system@0.6.5
 - @lion/radio-group@0.8.4
 - @lion/select-rich@0.12.1
 - @lion/switch@0.7.1
2020-03-12 16:34:05 +00:00
..
src feat: use Scoped Elements 2020-03-05 16:04:49 +01:00
stories chore: move radio, checkbox and option 2020-03-04 17:33:09 +01:00
test feat: use Scoped Elements 2020-03-05 16:04:49 +01:00
CHANGELOG.md chore: release new versions 2020-03-12 16:34:05 +00:00
index.js chore: move radio, checkbox and option 2020-03-04 17:33:09 +01:00
lion-option.js chore: move radio, checkbox and option 2020-03-04 17:33:09 +01: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-03-12 16:34:05 +00:00
README.md chore: move radio, checkbox and option 2020-03-04 17:33:09 +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/select-rich/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>