fix: update links in stories
This commit is contained in:
Thomas Allmer
parent
ddd1a72ba7
commit
0c53b1d4bb
32 changed files with 78 additions and 77 deletions
|
|
@ -8,7 +8,7 @@ You should use [lion-checkbox](../checkbox/)'s inside this element.
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -37,11 +37,11 @@ Its purpose is to provide a way for users to check **multiple** options amongst
|
|||
</lion-checkbox-group>
|
||||
```
|
||||
|
||||
> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
|
||||
> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
|
||||
|
||||
## Features
|
||||
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset) for a live demo and documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ import './helpers/demo-fieldset-child.js';
|
|||
We have three specific fieldset implementations:
|
||||
|
||||
- [lion-form](?path=/docs/forms-form-overview--page)
|
||||
- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
|
||||
- [lion-radio-group](?path=/docs/forms-radio-group)
|
||||
- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
|
||||
- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
|
||||
|
||||
```html
|
||||
<lion-fieldset name="nameGroup" label="Name">
|
||||
|
|
@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
|
|||
## Features
|
||||
|
||||
- Easy retrieval of form data based on field names
|
||||
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
|
||||
- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
|
||||
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||
- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
|
||||
- Can disable input fields on fieldset level
|
||||
- Accessible out of the box
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ The Form System allows you to create complex forms with various validations in a
|
|||
|
||||
## Features
|
||||
|
||||
- Built in [validate](?path=/docs/forms-system-validate-system) for error/warning/info/success
|
||||
- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
|
||||
- Formatting of values
|
||||
- Accessible
|
||||
|
||||
|
|
@ -14,12 +14,13 @@ For a more in depth description look into the [Form System Overview](?path=/docs
|
|||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ---------------------------------------------------- | ---------------------------------- |
|
||||
| Package | Description |
|
||||
| ---------------------------------------------------- | ------------------------------------------------- |
|
||||
| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes |
|
||||
| [field](?path=/docs/forms-field--default-story) | Base class for all inputs |
|
||||
| [form](?path=/docs/forms-form--default-story) | Wrapper for multiple form elements |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs |
|
||||
| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements |
|
||||
| [input](?path=/docs/forms-input--default-story) | Input element for strings |
|
||||
| [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts |
|
||||
| [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates |
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ They extend `LionField`, which in turn uses the `FormControlMixin`.
|
|||
Fields provide a normalized api for both platform components and custom made form controls.
|
||||
On top of this, they offer:
|
||||
|
||||
- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing) of view values
|
||||
- advanced [validation](?path=/docs/forms-system-validate-system) possibilities
|
||||
- [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing--parser) of view values
|
||||
- advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
|
||||
- creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||
- provision of labels and help texts in an easy, declarative manner
|
||||
- accessibility out of the box <!-- TODO: write how our form system manages to deliver accessible components with all challenges that shadow dom provide -->
|
||||
|
|
@ -40,30 +40,30 @@ On top of this, they offer:
|
|||
|
||||
Platform field wrappers add all of the functionality described above to native form elements.
|
||||
|
||||
- [LionInput](?path=/docs/forms-input), a wrapper for `<input>`
|
||||
- [LionTextarea](?path=/docs/forms-textarea), a wrapper for `<textarea>`
|
||||
- [LionSelect](?path=/docs/forms-select), a wrapper for `<select>`
|
||||
- [LionRadio](?path=/docs/forms-radio-group), a wrapper for `<input type="radio">`
|
||||
- [LionCheckbox](?path=/docs/forms-checkbox-group), a wrapper for `<input type="checkbox">`
|
||||
- [LionInputRange](?path=/docs/forms-input-range), a wrapper for `<input type="range">`
|
||||
- [LionInput](?path=/docs/forms-input--default-story), a wrapper for `<input>`
|
||||
- [LionTextarea](?path=/docs/forms-textarea--default-story), a wrapper for `<textarea>`
|
||||
- [LionSelect](?path=/docs/forms-select--default-story), a wrapper for `<select>`
|
||||
- [LionRadio](?path=/docs/forms-radio-group--default-story), a wrapper for `<input type="radio">`
|
||||
- [LionCheckbox](?path=/docs/forms-checkbox-group--default-story), a wrapper for `<input type="checkbox">`
|
||||
- [LionInputRange](?path=/docs/forms-input-range--default-story), a wrapper for `<input type="range">`
|
||||
|
||||
### Dedicated fields
|
||||
|
||||
Dedicated fields are less generic fields in a sense that they by default expect a certain type of
|
||||
modelValue. This means that they have validators, parsers and formatters preconfigured.
|
||||
|
||||
- [`LionInputDate`](?path=/docs/forms-input-date)
|
||||
- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker)
|
||||
- [`LionInputEmail`](?path=/docs/forms-input-email)
|
||||
- [`LionInputAmount`](?path=/docs/forms-input-amount)
|
||||
- [`LionInputIban`](?path=/docs/forms-input-iban)
|
||||
- [`LionInputDate`](?path=/docs/forms-input-date--default-story)
|
||||
- [`LionInputDatepicker`](?path=/docs/forms-input-datepicker--default-story)
|
||||
- [`LionInputEmail`](?path=/docs/forms-input-email--default-story)
|
||||
- [`LionInputAmount`](?path=/docs/forms-input-amount--default-story)
|
||||
- [`LionInputIban`](?path=/docs/forms-input-iban--default-story)
|
||||
|
||||
### Custom fields
|
||||
|
||||
Instead of wrapping native elements, this category of fields contains custom built
|
||||
form elements.
|
||||
|
||||
- [`LionSelectRich`](?path=/docs/forms-select-rich), an advanced (rich) version of `<select>`
|
||||
- [`LionSelectRich`](?path=/docs/forms-select-rich--default-story), an advanced (rich) version of `<select>`
|
||||
|
||||
One could also think of components like:
|
||||
|
||||
|
|
@ -80,17 +80,17 @@ Fieldsets are groups of fields. They can be considered fields on their own as we
|
|||
partly share the normalized api via `FormControlMixin`.
|
||||
Fieldsets are at the base of:
|
||||
|
||||
- [`LionFieldset`](?path=/docs/forms-fieldset)
|
||||
- [`LionForm`](?path=/docs/forms-form)
|
||||
- [`LionRadioGroup`](?path=/docs/forms-radio-group)
|
||||
- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group)
|
||||
- [`LionFieldset`](?path=/docs/forms-fieldset-overview--page)
|
||||
- [`LionForm`](?path=/docs/forms-form-overview--page)
|
||||
- [`LionRadioGroup`](?path=/docs/forms-radio-group--default-story)
|
||||
- [`LionCheckboxGroup`](?path=/docs/forms-checkbox-group--default-story)
|
||||
|
||||
## Other Resources
|
||||
|
||||
<!-- TODO: - [`FormControlMixin`] () -->
|
||||
<!-- TODO: - [`LionField`] () -->
|
||||
|
||||
- [Model Value](?path=/docs/forms-system-modelvalue)
|
||||
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing)
|
||||
- [Interaction states](?path=/docs/forms-system-interaction-states)
|
||||
- [Validation System](?path=/docs/forms-system-validate-system)
|
||||
- [Model Value](?path=/docs/forms-system-modelvalue--page)
|
||||
- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
|
||||
- [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||
- [Validation System](?path=/docs/forms-validation-overview--page)
|
||||
|
|
|
|||
|
|
@ -25,4 +25,4 @@ level, via:
|
|||
> Internal/private concepts like viewValue, formattedValue, serializedValue are therefore not
|
||||
> recommended as a means of interaction.
|
||||
|
||||
For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing)
|
||||
For more information about parsing and the Unparseable type, see [Formatting and Parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import './helper-wc/h-output.js';
|
|||
# Creating a custom field
|
||||
|
||||
Custom fields can be created in just a few steps. All you need is an interaction element
|
||||
(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview)
|
||||
(like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview--page)
|
||||
functionality.
|
||||
|
||||
## Prerequisite: an interaction element
|
||||
|
|
@ -25,7 +25,7 @@ it has a tabindex=“0” applied.
|
|||
## Connecting the interaction element to the field
|
||||
|
||||
Now we want to integrate the slider in our form framework to enrich the user interface, get
|
||||
validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview).
|
||||
validation support and get all the other [benefits of LionField](/?path=/docs/forms-system-overview--page).
|
||||
We start of by creating a component `<lion-slider>` that extends from `LionField`.
|
||||
Then we follow the steps below:
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form) for a live demo and documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|||
# Form
|
||||
|
||||
`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
|
||||
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
|
||||
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
|
||||
|
||||
```html
|
||||
<lion-form id="form">
|
||||
|
|
@ -21,12 +21,12 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
|
|||
- Data synchronization with models
|
||||
- Easy retrieval of form data based on field names
|
||||
- Advanced validation possibilities
|
||||
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
|
||||
- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
|
||||
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
|
||||
- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
|
||||
- Accessible out of the box
|
||||
|
||||
For more information about fields that are designed for lion-form, please read
|
||||
[Forms](?path=/docs/forms-form).
|
||||
[Forms](?path=/docs/forms-system-overview--page).
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@ If there are no valid characters in the input whatsoever, it will provide an err
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [lion-input](?path=/docs/forms-system-overview)
|
||||
- Based on [lion-input](?path=/docs/forms-system-overview--page)
|
||||
- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
|
||||
- Option to show currency as a suffix
|
||||
- Option to override locale to change the formatting and parsing
|
||||
- Option to provide additional format options overrides
|
||||
- Default label in different languages
|
||||
- Can make use of number specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
|
||||
- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
||||
- IsNumber (default)
|
||||
- MinNumber
|
||||
- MaxNumber
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@ import '../lion-input-date.js';
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [lion-input](?path=/docs/forms-input)
|
||||
- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
|
||||
- Based on [lion-input](?path=/docs/forms-input--default-story)
|
||||
- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
|
||||
- Option to override locale to change the formatting and parsing
|
||||
- Default label in different languages
|
||||
- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
|
||||
- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
||||
- IsDate (default)
|
||||
- MinDate
|
||||
- MaxDate
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ For an input field with a big range, such as `birthday-input`, a datepicker is n
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -30,9 +30,9 @@ We encourage using the standard [lion-input-date](?path=/docs/form-component-inp
|
|||
- Input field with a datepicker to help to choose a date
|
||||
- Based on [lion-input-date](?path=/docs/form-component-input-date)
|
||||
- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
|
||||
- Makes use of [formatDate](?path=/docs/localize-dates) for formatting and parsing.
|
||||
- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
|
||||
- Option to overwrite locale to change the formatting and parsing
|
||||
- Can make use of date specific [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
|
||||
- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
||||
- IsDate (default)
|
||||
- MinDate
|
||||
- MaxDate
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@ import '../lion-input-email.js';
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [lion-input](?path=/docs/forms-input)
|
||||
- Makes use of email [validators](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
|
||||
- Based on [lion-input](?path=/docs/forms-input--default-story)
|
||||
- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
||||
- IsEmail (default)
|
||||
|
||||
## How to use
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@ Its purpose is to provide a way for users to fill in an IBAN (International Bank
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [lion-input](?path=/docs/forms-input)
|
||||
- Based on [lion-input](?path=/docs/forms-input--default-story)
|
||||
- Default label in different languages
|
||||
- Makes use of IBAN specific [validate](?path=/docs/forms-system-validate-system) with corresponding error messages in different languages
|
||||
- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
|
||||
- IsIBAN (default)
|
||||
- IsCountryIBAN
|
||||
- Parses IBANs automatically
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Its purpose is to provide a way for users to select one value from a range of va
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ Its purpose is to provide a way for users to select one value from a range of va
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [lion-input](?path=/docs/forms-input).
|
||||
- Based on [lion-input](?path=/docs/forms-input--default-story).
|
||||
- Shows `modelValue` and `unit` above the range input.
|
||||
- Shows `min` and `max` value after the range input.
|
||||
- Can hide the `min` and `max` value via `no-min-max-labels`.
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import '../lion-input.js';
|
|||
|
||||
## Features
|
||||
|
||||
- Based on [field](?path=/docs/forms-system-overview)
|
||||
- Based on [field](?path=/docs/forms-system-overview--page)
|
||||
- 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.
|
||||
|
|
@ -33,7 +33,7 @@ import '../lion-input.js';
|
|||
- **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`, `placeholder` and `read-only` to the native input.
|
||||
- Can make us of [validation](?path=/docs/forms-system-validate-system)
|
||||
- Can make us of [validation](?path=/docs/forms-validation-overview--page)
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
@ -195,7 +195,7 @@ In these cases a button with an icon is used.
|
|||
|
||||
## Using validation
|
||||
|
||||
The input can be used with [validation](?path=/docs/forms-system-validate-system).
|
||||
The input can be used with [validation](?path=/docs/forms-validation-overview--page).
|
||||
On certain conditions, a feedback message can be shown if the input value is invalid.
|
||||
|
||||
You can change the locale with the buttons below the field.
|
||||
|
|
|
|||
|
|
@ -40,9 +40,9 @@ If you need more details these are the actual npm packages we are publishing
|
|||
| Package | Version | Description |
|
||||
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
|
||||
| **-- Forms --** | | |
|
||||
| [form](?path=/docs/forms-form--default-story) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
||||
| [field](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs |
|
||||
| [fieldset](?path=/docs/forms-fieldset--default-story) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
||||
| [form](?path=/docs/forms-form-overview--page) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
||||
| [field](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--page) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
||||
| [validate](?path=/docs/form-system-validate-system--page) | [](https://www.npmjs.com/package/@lion/validate) | Validation for form components |
|
||||
| [checkbox](?path=/docs/forms-checkbox--default-story) | [](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ Further examples can be seen at [Features Overview Demo](?path=/docs/localize-fe
|
|||
| --------------------------------------------------------------------- | --------------------------------------------- |
|
||||
| [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
|
||||
| [Format Numbers](?path=/docs/localize-numbers--formatting) | Format numbers in multiple languages |
|
||||
| [Format Dates](?path=/docs/localize-dates--formatting) | Format dates in multiple languages |
|
||||
| [Format Dates](?path=/docs/localize-dates--formatting)--formatting) | Format dates in multiple languages |
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import '../lion-option.js';
|
|||
|
||||
# Option
|
||||
|
||||
`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich)
|
||||
`lion-option` is a selectable within a [lion-select-rich](?path=/docs/forms-select-rich--default-story)
|
||||
|
||||
<Story name="Default">
|
||||
{html`
|
||||
|
|
@ -117,4 +117,4 @@ This is identical to `lion-checkbox`, `lion-radio` etc.
|
|||
|
||||
This also explains the (intended) accessibility violation when viewing these demos in Canvas mode.
|
||||
|
||||
For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich).
|
||||
For more details on usage, please see [lion-select-rich](?path=/docs/forms-select-rich--default-story).
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ You should use [lion-radio](../radio/)'s inside this element.
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@ You should use `<lion-radio>`s inside this element.
|
|||
</lion-radio-group>
|
||||
```
|
||||
|
||||
- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form)'s serialization result.
|
||||
- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select) instead
|
||||
- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
|
||||
- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
|
||||
|
||||
## Features
|
||||
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset), it has all the features a fieldset has.
|
||||
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
|
||||
|
||||
- Get or set the checked value of the group:
|
||||
- modelValue (default) - `checkedValue()`
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Its purpose is to provide a way for users to write text that is multiple lines l
|
|||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea) for a live demo and API documentation
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ We could therefore say validation happens 'realtime'. This is aligned with the p
|
|||
|
||||
Although validation happens realtime under the hood, displaying validity feedback in realtime may
|
||||
not always lead to the desired User Experience.
|
||||
Together with [interaction states](?path=/docs/form-system-interaction-states--interaction-states),
|
||||
Together with [interaction states](?path=/docs/forms-system-interaction-states--interaction-states),
|
||||
validity states can determine whether a validation message should be shown along the input field.
|
||||
|
||||
## Validators
|
||||
|
|
|
|||
Loading…
Reference in a new issue