Switch: Use Cases
Disabled
You can disable switches.
<lion-switch label="Label" disabled></lion-switch>
Validation
An example that illustrates how an info validation feedback can be always displayed.
class IsTrue 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'];
}
_showFeedbackConditionFor(type, meta) {
if (type === 'info') {
return true;
}
return super._showFeedbackConditionFor(type, meta);
}
}
customElements.define('custom-switch', CustomSwitch);
export const validation = () => html`
<custom-switch
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.
export const handler = ({ shadowRoot }) => {
return html`
<lion-switch
label="Label"
@checked-changed="${ev => {
shadowRoot.querySelector('sb-action-logger').log(`Current value: ${ev.target.checked}`);
}}"
>
</lion-switch>
<sb-action-logger></sb-action-logger>
`;
};