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

chore(switch): add docu for checked-changed handler (#611)

Browse source
This commit is contained in:
Stijn Van Asschodt 2020-03-04 15:59:18 +01:00 committed by Thomas Allmer
parent d98018b39c
commit 1ee1324fbc
2 changed files with 46 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/switch/package.json
View file

@ -39,6 +39,7 @@
"@lion/field": "0.11.1" "@lion/field": "0.11.1"
}, },
"devDependencies": { "devDependencies": {
"@lion/helpers": "0.3.2",
"@lion/localize": "0.8.8", "@lion/localize": "0.8.8",
"@lion/validate": "0.7.0", "@lion/validate": "0.7.0",
"@open-wc/demoing-storybook": "^1.10.4", "@open-wc/demoing-storybook": "^1.10.4",

46
packages/switch/stories/index.stories.mdx
View file

@ -3,6 +3,7 @@ import { Validator } from '@lion/validate';
import { LionSwitch } from '../src/LionSwitch'; import { LionSwitch } from '../src/LionSwitch';
import '../lion-switch.js'; import '../lion-switch.js';
import '@lion/helpers/sb-action-logger.js';
<Meta title="Buttons/Switch" /> <Meta title="Buttons/Switch" />
@ -80,7 +81,9 @@ Simple example that illustrates where validation feedback will be displayed.
return [...super.validationTypes, 'info']; return [...super.validationTypes, 'info'];
} }
} }
customElements.define('custom-switch', CustomSwitch); if (!customElements.get('custom-switch')) {
customElements.define('custom-switch', CustomSwitch);
}
return html` return html`
<custom-switch <custom-switch
id="newsletterCheck" id="newsletterCheck"
@ -124,3 +127,44 @@ customElements.define('custom-switch', CustomSwitch);
.validators="${[new IsTrue(null, {type: 'info'})]}" .validators="${[new IsTrue(null, {type: 'info'})]}"
></custom-switch> ></custom-switch>
``` ```
### With checked-changed handler
You can listen for a `checked-changed` event that is fired when the switch is clicked.
<Story name="checked-changed handler">
{() => {
const uid = Math.random()
.toString(36)
.substr(2, 10);
return html`
<lion-switch
label="Label"
@checked-changed="${e => {
document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
}}"
>
</lion-switch>
<sb-action-logger id="logger-${uid}"></sb-action-logger>
`;
}}
</Story>
```js
import '@lion/helpers/sb-action-logger.js';
const uid = Math.random()
.toString(36)
.substr(2, 10);
```
```html
<lion-switch
label="Label"
@checked-changed="${(e) => {
document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
}}"
>
<sb-action-logger id="logger-${uid}"></sb-action-logger>
</lion-switch>
```