You can install the component using NPM or Yarn.
npm install @tournant/switch-button --save
If you use Yarn:
yarn add @tournant/switch-button
Once the component is installed you need to import it wherever you want to use it.
Don’t forget to add it to the registered components (been there, done that):
components:TournantSwitchButton// ... all the other amazing components
Use this switch button, or toggle button as they are sometimes called, to implement a setting where you need literally an on-off switch (think: dark mode). Read here more about the decision to not implement it with a checkbox input.
value prop to set the switch button's state:
<tournant-switch-button> as a controlled component, use the
v-model attribute to bind it:
Notify me by carrier pidgeon
To supply a both visual and programmatically determined label for your switch button instance use the default slot like this:
Other visually perceivable texts are available: the
on-label prop (default value: "On", type String) labels the "on" state, whereas – surprisingly – the
off-label prop (default value: "Off", type String) labels the "off" state:
The component exposes the following CSS classes for its parts:
|t-ui-switch-button__button||The button itself|
|t-ui-switch-button__label||The visual label|
|t-ui-switch-button_\text||Generic container for the visual state label|
|t-ui-switch-button_\text--on||Visual state label for "on" state|
|t-ui-switch-button_\text-off||Visual state label for "off" state|
Bugs & Enhancements
If you found a bug, please create a bug ticket.
For enhancements please refer to the contributing guidelines.