ayo/lion

History

CircleCI 6edef20f73 chore: release new versions - @lion/button@0.3.2 - @lion/calendar@0.1.48 - @lion/checkbox-group@0.1.47 - @lion/checkbox@0.1.42 - @lion/choice-input@0.2.19 - @lion/field@0.1.39 - @lion/fieldset@0.1.41 - @lion/form-system@0.0.49 - @lion/form@0.1.46 - @lion/input-amount@0.1.42 - @lion/input-date@0.1.41 - @lion/input-datepicker@0.1.51 - @lion/input-email@0.1.41 - @lion/input-iban@0.1.42 - @lion/input@0.1.41 - @lion/localize@0.4.10 - @lion/option@0.1.1 - @lion/popup@0.2.28 - @lion/radio-group@0.1.47 - @lion/radio@0.1.42 - @lion/select-rich@0.1.4 - @lion/select@0.1.39 - @lion/textarea@0.1.44 - @lion/tooltip@0.2.28 - @lion/validate@0.2.23		2019-07-30 14:13:09 +00:00
..
src	fix(input): delegate "step" attribute	2019-07-16 18:10:10 +02:00
stories	fix: support Chinese language	2019-07-17 10:11:32 +02:00
test	fix(input): delegate "step" attribute	2019-07-16 18:10:10 +02:00
CHANGELOG.md	chore: release new versions	2019-07-30 14:13:09 +00:00
index.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
lion-input.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
package.json	chore: release new versions	2019-07-30 14:13:09 +00:00
README.md	chore: fix style of markdown files	2019-07-24 15:20:19 +02:00

README.md

Input

lion-input component is a webcomponent that enhances the functionality of the native <input> element.

Features

based on field
extra visual elements can be added via slots
- label: can also be provided via the label attribute, but the slot can be used to change the html and CSS of the label. For example add an sr-only class to the label to make it visually hidden. A label is always needed for accessibility reasons.
- help-text: a helper text shown below the label to give extra clarification.
- prefix: does not have an active use case yet, but the option is in place.
- suffix: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
- before: does not have an active use case yet, but the option is in place.
- after: can be used to show a currency or percentage.
delegates attributes like type, disabled and read-only to the native input
can make us of validate

How to use

Installation

npm i --save @lion/input

import '@lion/input/lion-input.js';

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

Example

<lion-input
  label="My label"
  name="myName"
  .modelValue="${foo}"
  .errorValidators="${[['required'], maxLengthValidator(20)]}"
></lion-input>

Making use of slots:

<lion-input name="amount">
  <label slot="label">Amount</label>
  <div slot="help-text">Extra information</div>
  <div slot="after">EUR</div>
</lion-input>