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
|
||||
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)
|
||||
functionality.
|
||||
|
||||
## 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>`).
|
||||
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)
|
||||
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,
|
||||
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](../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:
|
||||
|
||||
- ### 1. Add your interaction element as ‘input slot'
|
||||
|
|
@ -41,7 +41,7 @@ import { LionField } from '@lion/field';
|
|||
import './my-slider.js';
|
||||
|
||||
export class LionSlider extends LionField {
|
||||
// 1. Add your interaction element as ‘input slot'
|
||||
// 1. Add your interaction element as ‘input slot'
|
||||
get slots() {
|
||||
return {
|
||||
...super.slots,
|
||||
|
|
@ -50,7 +50,7 @@ export class LionSlider extends LionField {
|
|||
}
|
||||
|
||||
// 2. Proxy event `my-slider-changed` to `user-input-changed` event
|
||||
connectedCallback() {
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
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.
|
||||
```html
|
||||
```html
|
||||
<lion-select
|
||||
name="favoriteColor"
|
||||
.modelValue="${'<value of option 2>'}"
|
||||
>
|
||||
...
|
||||
</lion-select>
|
||||
```
|
||||
```
|
||||
|
|
|
|||
Loading…
Reference in a new issue