chore: fix issues found in markdown files by linters
This commit is contained in:
parent
1114500103
commit
0460cebe27
2 changed files with 9 additions and 9 deletions
|
|
@ -1,23 +1,23 @@
|
||||||
# Creating a custom field
|
# Creating a custom field
|
||||||
Custom fields can be created in just a few steps. All you need is an interaction element
|
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](../README.md)
|
(like for instance a slider, a listbox or a combobox) and connect it to the [Field](../README.md)
|
||||||
functionality.
|
functionality.
|
||||||
|
|
||||||
## Prerequisite: an interaction element
|
## Prerequisite: an interaction element
|
||||||
An interaction element provides the means for the end user to enter a certain value, just like
|
An interaction element provides the means for the end user to enter a certain value, just like
|
||||||
native elements provide in this (think of `<input>`, `<textarea>` and `<select>`).
|
native elements provide in this (think of `<input>`, `<textarea>` and `<select>`).
|
||||||
An example of a non native element is the
|
An example of a non native element is the
|
||||||
[slider design pattern](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#slider)
|
[slider design pattern](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#slider)
|
||||||
described here.
|
described here.
|
||||||
|
|
||||||
For this tutorial, we assume we have a component `<my-slider>` that exposes its value via property
|
For this tutorial, we assume we have a component `<my-slider>` that exposes its value via property
|
||||||
`mySliderValue` and sends an event `my-slider-changed` on every value change. To make it focusable,
|
`mySliderValue` and sends an event `my-slider-changed` on every value change. To make it focusable,
|
||||||
it has a tabindex=“0” applied.
|
it has a tabindex=“0” applied.
|
||||||
|
|
||||||
## Connecting the interaction element to the field
|
## Connecting the interaction element to the field
|
||||||
Now we want to integrate the slider in our form framework to enrich the user interface, get
|
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](../README.md).
|
validation support and get all the other [benefits of LionField](../README.md).
|
||||||
We start of by creating a component `<lion-slider>` that extends from `LionField`.
|
We start of by creating a component `<lion-slider>` that extends from `LionField`.
|
||||||
Then we follow the steps below:
|
Then we follow the steps below:
|
||||||
|
|
||||||
- ### 1. Add your interaction element as ‘input slot'
|
- ### 1. Add your interaction element as ‘input slot'
|
||||||
|
|
@ -41,7 +41,7 @@ import { LionField } from '@lion/field';
|
||||||
import './my-slider.js';
|
import './my-slider.js';
|
||||||
|
|
||||||
export class LionSlider extends LionField {
|
export class LionSlider extends LionField {
|
||||||
// 1. Add your interaction element as ‘input slot'
|
// 1. Add your interaction element as ‘input slot'
|
||||||
get slots() {
|
get slots() {
|
||||||
return {
|
return {
|
||||||
...super.slots,
|
...super.slots,
|
||||||
|
|
@ -50,7 +50,7 @@ export class LionSlider extends LionField {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. Proxy event `my-slider-changed` to `user-input-changed` event
|
// 2. Proxy event `my-slider-changed` to `user-input-changed` event
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
super.connectedCallback();
|
super.connectedCallback();
|
||||||
this.addEventListener('my-slider-changed', this._proxyChangeEvent);
|
this.addEventListener('my-slider-changed', this._proxyChangeEvent);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,11 +42,11 @@ import '@lion/select/lion-select.js';
|
||||||
```
|
```
|
||||||
|
|
||||||
You can preselect an option by setting the property modelValue.
|
You can preselect an option by setting the property modelValue.
|
||||||
```html
|
```html
|
||||||
<lion-select
|
<lion-select
|
||||||
name="favoriteColor"
|
name="favoriteColor"
|
||||||
.modelValue="${'<value of option 2>'}"
|
.modelValue="${'<value of option 2>'}"
|
||||||
>
|
>
|
||||||
...
|
...
|
||||||
</lion-select>
|
</lion-select>
|
||||||
```
|
```
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue