173 lines
4 KiB
Text
173 lines
4 KiB
Text
import { Story, Meta, html } from '@open-wc/demoing-storybook';
|
|
import { Validator } from '@lion/validate';
|
|
|
|
import { LionSwitch } from '../index.js';
|
|
import '../lion-switch.js';
|
|
import '@lion/helpers/sb-action-logger.js';
|
|
|
|
<Meta title="Buttons/Switch" />
|
|
|
|
# Switch
|
|
|
|
`lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form.
|
|
|
|
<Story name="Default (off)">{html`
|
|
<lion-switch label="Label" help-text="Help text"></lion-switch>
|
|
`}</Story>
|
|
|
|
```html
|
|
<lion-switch label="Label" help-text="Help text"></lion-switch>
|
|
```
|
|
|
|
<Story name="Checked">{html`
|
|
<lion-switch label="Label" help-text="Help text" checked></lion-switch>
|
|
`}</Story>
|
|
|
|
```html
|
|
<lion-switch label="Label" help-text="Help text" checked></lion-switch>
|
|
```
|
|
|
|
## Features
|
|
|
|
- Get or set the checked state (boolean) - `checked` boolean attribute
|
|
- Pre-select an option by setting the `checked` boolean attribute
|
|
- Get or set the value of the choice - `choiceValue()`
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/switch
|
|
```
|
|
|
|
```js
|
|
import '@lion/switch/lion-switch.js';
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Disabled
|
|
|
|
You can disable switches.
|
|
|
|
<Story name="Disabled">{html`
|
|
<lion-switch label="Label" disabled></lion-switch>
|
|
`}</Story>
|
|
|
|
```html
|
|
<lion-switch label="Label" disabled></lion-switch>
|
|
```
|
|
|
|
### Validation
|
|
|
|
Simple example that illustrates where validation feedback will be displayed.
|
|
|
|
<Story name="Validation">
|
|
{() => {
|
|
const IsTrue = class extends Validator {
|
|
static get validatorName() {
|
|
return 'IsTrue';
|
|
}
|
|
execute(value) {
|
|
return !value.checked;
|
|
}
|
|
static async getMessage() {
|
|
return "You won't get the latest news!";
|
|
}
|
|
};
|
|
const tagName = 'custom-switch';
|
|
if (!customElements.get(tagName)) {
|
|
customElements.define(
|
|
tagName,
|
|
class CustomSwitch extends LionSwitch {
|
|
static get validationTypes() {
|
|
return [...super.validationTypes, 'info'];
|
|
}
|
|
},
|
|
);
|
|
}
|
|
return html`
|
|
<custom-switch
|
|
id="newsletterCheck"
|
|
name="newsletterCheck"
|
|
label="Subscribe to newsletter"
|
|
.validators="${[new IsTrue(null, { type: 'info' })]}"
|
|
></custom-switch>
|
|
`;
|
|
}}
|
|
</Story>
|
|
|
|
```js
|
|
import { Validator } from '@lion/validate';
|
|
import { LionSwitch } from '@lion/switch';
|
|
|
|
const IsTrue = class extends Validator {
|
|
static get validatorName() {
|
|
return 'IsTrue';
|
|
}
|
|
execute(value) {
|
|
return !value.checked;
|
|
}
|
|
static async getMessage() {
|
|
return "You won't get the latest news!";
|
|
}
|
|
};
|
|
|
|
class CustomSwitch extends LionSwitch {
|
|
static get validationTypes() {
|
|
return [...super.validationTypes, 'info'];
|
|
}
|
|
}
|
|
customElements.define('custom-switch', CustomSwitch);
|
|
```
|
|
|
|
```html
|
|
<custom-switch
|
|
id="newsletterCheck"
|
|
name="newsletterCheck"
|
|
label="Subscribe to newsletter"
|
|
.validators="${[new IsTrue(null, {type: 'info'})]}"
|
|
></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>
|
|
```
|