chore: fix issues found in markdown files by linters

This commit is contained in:
Joren Broekema 2019-06-04 14:07:22 +02:00 committed by Mikhail Bashkirov
parent 1114500103
commit 0460cebe27
2 changed files with 9 additions and 9 deletions

View file

@ -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);
}

View file

@ -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>
```
```