ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: add event example for radio and checkbox group (#962)

Browse source 
Co-authored-by: Thomas Allmer <thomas.allmer@ing.com>
This commit is contained in:
Hardik Pithva 2020-09-29 12:13:34 +02:00 committed by GitHub
parent bcc809b6bb
commit 35efc9c49e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 46 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
packages/checkbox-group/README.md
View file

@ -209,3 +209,28 @@ export const helpText = () => html`
</lion-checkbox-group>
`;
```
### Event
You can listen to the `model-value-changed` event whenever the value of the checkbox group is changed.
```js preview-story
export const event = () => html`
<lion-checkbox-group
name="scientists[]"
label="Favorite scientists"
@model-value-changed=${e =>
(document.getElementById('selectedDinosaur').innerText = JSON.stringify(
e.target.modelValue,
null,
4,
))}
>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
</lion-checkbox-group>
<br />
<span>Selected scientists: <strong id="selectedDinosaur">N/A</strong></span>
`;
```

21
packages/radio-group/README.md
View file

@ -206,3 +206,24 @@ export const helpText = () => html`
</lion-radio-group>
`;
```
### Event
You can listen to the `model-value-changed` event whenever the value of the radio group is changed.
```js preview-story
export const event = () => html`
<lion-radio-group
name="dinosTwo"
label="Favourite dinosaur"
@model-value-changed=${e =>
(document.getElementById('selectedDinosaur').innerText = e.target.modelValue)}
>
<lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
</lion-radio-group>
<br />
<span>Selected dinosaur: <strong id="selectedDinosaur">N/A</strong></span>
`;
```