0.31.1 • Published 1 year ago

@lion/select-rich v0.31.1

Weekly downloads
237
License
MIT
Repository
github
Last release
1 year ago

Inputs >> Select Rich >> Overview ||10

This web component is a 'rich' version of the native <select> element. It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native <select> doesn't provide enough styling,theming or 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

import { LitElement, html } from '@lion/core';
import '@lion/listbox/define';
import '@lion/select-rich/define';
export const main = () => html`
  <lion-select-rich name="favoriteColor" label="Favorite color">
    <lion-option .choiceValue=${'red'}>Red</lion-option>
    <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
    <lion-option .choiceValue=${'blue'}>Blue</lion-option>
  </lion-select-rich>
`;

Features

  • Fully accessible
  • Flexible API
  • Fully customizable option elements
  • Fully customizable invoker element
  • Mimics native select interaction mode (windows/linux and mac)

Installation

npm i --save @lion/select-rich
import { LionSelectRich, LionOptions, LionOption } from '@lion/select-rich';
// or
import '@lion/select-rich/define';
import '@lion/listbox/define';

No need to npm install @lion/option separately, it comes with the rich select as a dependency

0.25.7

1 year ago

0.25.6

2 years ago

0.25.5

2 years ago

0.31.1

3 years ago

0.30.1

3 years ago

0.31.0

3 years ago

0.25.4

3 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.30.0

3 years ago

0.29.0

3 years ago

0.28.0

4 years ago

0.27.7

4 years ago

0.27.6

4 years ago

0.27.5

4 years ago

0.27.4

4 years ago

0.27.3

4 years ago

0.27.2

4 years ago

0.27.1

4 years ago

0.27.0

4 years ago

0.26.0

4 years ago

0.25.1

4 years ago

0.25.0

4 years ago

0.24.2

4 years ago

0.24.1

4 years ago

0.24.0

4 years ago

0.23.3

4 years ago

0.23.2

4 years ago

0.23.1

4 years ago

0.23.0

4 years ago

0.22.5

4 years ago

0.22.4

4 years ago

0.22.3

4 years ago

0.22.2

4 years ago

0.22.1

4 years ago

0.22.0

4 years ago

0.21.28

4 years ago

0.21.27

4 years ago

0.21.26

4 years ago

0.21.25

4 years ago

0.21.24

4 years ago

0.21.23

4 years ago

0.21.22

5 years ago

0.21.21

5 years ago

0.21.20

5 years ago

0.21.19

5 years ago

0.21.18

5 years ago

0.21.17

5 years ago

0.21.16

5 years ago

0.21.15

5 years ago

0.21.14

5 years ago

0.21.12

5 years ago

0.21.13

5 years ago

0.21.11

5 years ago

0.21.10

5 years ago

0.21.9

5 years ago

0.21.8

5 years ago

0.21.7

5 years ago

0.21.6

5 years ago

0.21.5

5 years ago

0.21.4

5 years ago

0.21.3

5 years ago

0.21.2

5 years ago

0.21.1

5 years ago

0.21.0

5 years ago

0.20.0

5 years ago

0.19.6

5 years ago

0.19.5

5 years ago

0.19.4

5 years ago

0.19.3

5 years ago

0.19.1

5 years ago

0.19.0

5 years ago

0.18.21

5 years ago

0.18.20

5 years ago

0.18.19

5 years ago

0.18.17

5 years ago

0.18.18

5 years ago

0.18.13

5 years ago

0.18.15

5 years ago

0.18.14

5 years ago

0.18.16

5 years ago

0.18.12

5 years ago

0.18.11

5 years ago

0.18.9

5 years ago

0.18.10

5 years ago

0.18.8

5 years ago

0.18.7

5 years ago

0.18.6

5 years ago

0.18.5

5 years ago

0.18.3

5 years ago

0.18.4

5 years ago

0.18.2

5 years ago

0.18.1

5 years ago

0.18.0

5 years ago

0.17.5

5 years ago

0.17.4

5 years ago

0.17.3

5 years ago

0.17.2

5 years ago

0.17.1

5 years ago

0.17.0

5 years ago

0.16.0

5 years ago

0.15.4

5 years ago

0.15.3

5 years ago

0.15.2

5 years ago

0.15.1

5 years ago

0.15.0

5 years ago

0.14.2

5 years ago

0.14.1

5 years ago

0.14.0

5 years ago

0.13.0

5 years ago

0.12.4

5 years ago

0.12.3

5 years ago

0.12.2

5 years ago

0.12.1

5 years ago

0.12.0

5 years ago

0.11.4

5 years ago

0.11.3

5 years ago

0.11.2

5 years ago

0.11.1

5 years ago

0.11.0

5 years ago

0.10.4

5 years ago

0.10.3

5 years ago

0.10.2

5 years ago

0.10.1

5 years ago

0.9.10

5 years ago

0.9.11

5 years ago

0.10.0

5 years ago

0.9.8

5 years ago

0.9.9

5 years ago

0.9.7

5 years ago

0.9.6

5 years ago

0.9.5

5 years ago

0.9.4

5 years ago

0.9.3

5 years ago

0.9.2

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.9

6 years ago

0.8.8

6 years ago

0.8.7

6 years ago

0.8.6

6 years ago

0.8.5

6 years ago

0.8.4

6 years ago

0.8.3

6 years ago

0.8.2

6 years ago

0.8.1

6 years ago

0.8.0

6 years ago

0.7.2

6 years ago

0.7.1

6 years ago

0.7.0

6 years ago

0.6.5

6 years ago

0.6.4

6 years ago

0.6.3

6 years ago

0.6.2

6 years ago

0.6.1

6 years ago

0.5.2

6 years ago

0.5.0

6 years ago

0.5.1

6 years ago

0.4.1

6 years ago

0.4.0

6 years ago

0.3.14

6 years ago

0.3.13

6 years ago

0.3.12

6 years ago

0.3.11

6 years ago

0.3.10

6 years ago

0.3.9

6 years ago

0.3.8

6 years ago

0.3.7

6 years ago

0.3.6

6 years ago

0.3.5

6 years ago

0.3.4

6 years ago

0.3.3

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.21

6 years ago

0.1.20

6 years ago

0.1.19

6 years ago

0.1.18

6 years ago

0.1.17

6 years ago

0.1.16

6 years ago

0.1.15

6 years ago

0.1.14

6 years ago

0.1.13

6 years ago

0.1.12

6 years ago

0.1.11

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago