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

View file

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