- Exciting release!Introducing "safe npm". Learn more →
@lion/switch
Advanced tools
- Version published
- Maintainers
- 2
- Weekly downloads
- 440
- increased by22.91%
Weekly downloads
Changelog
@lion/switch@0.21.2
Patch Changes
- Updated dependencies [cc294f20]
- @lion/core@0.24.0
- @lion/form-core@0.18.3
Readme
Switch >> Overview ||10
The Switch is used to toggle a property or feature on or off.
import { html as previewHtml } from '@mdjs/mdjs-preview';
import '@lion/switch/define-switch';
import { html, LitElement, ScopedElementsMixin } from '@lion/core';
import { LionSwitch } from '@lion/switch';
class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return { 'lion-switch': LionSwitch };
}
render() {
return html`<lion-switch label="Label" help-text="Help text"></lion-switch>`;
}
}
customElements.define('my-component', MyComponent);
export const main = () => previewHtml`<my-component></my-component>`;
When to use
- Toggling the component on or off has an immediate action (no confirmation by the user required).
- The Switch is typically used in setting applications.
- The Switch is not a Checkbox in disguise and can not be used as part of a form.
Features
- Get or set the checked state (boolean) -
checkedboolean attribute - Pre-select an option by setting the
checkedboolean attribute - Get or set the value of the choice -
choiceValue()
How to use
Code
- Install
npm i --save @lion/switch
- Use scoped registry
import { html, LitElement, ScopedElementsMixin } from '@lion/core';
import { LionSwitch } from '@lion/switch';
class MyComponent extends ScopedElementsMixin(LitElement) {
static get scopedElements() {
return { 'lion-switch': LionSwitch };
}
render() {
return html`<lion-switch></lion-switch>`;
}
}
- Use html
<script type="module">
import '@lion/switch/define-switch';
</script>
<lion-switch></lion-switch>
Keywords
FAQs
A Switch is used for switching a property or feature on and off
The npm package @lion/switch receives a total of 426 weekly downloads. As such, @lion/switch popularity was classified as not popular.
We found that @lion/switch demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.