Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
tests
LICENSE
README.md
jest.config.js
package.json

README.md

@tournant/switch-button

Installation

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.

import TournantSwitchButton from '@tournant/switch-button'

Don’t forget to add it to the registered components (been there, done that):

components: {
  TournantSwitchButton,
  // ... all the other amazing components
}

Usage

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.

Props

Use the value prop to set the switch button's state:

<tournant-switch-button value="true">Tournant awesomeness</tournant-switch-button>

To use <tournant-switch-button> as a controlled component, use the v-model attribute to bind it:

<tournant-switch-button v-model="pidgeon">Notify me by carrier pidgeon</tournant-switch-button>

To supply a both visual and programmatically determined label for your switch button instance use the default slot like this:

<tournant-switch-button>Dark mode</tournant-switch-button>

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:

<tournant-switch-button onLabel="An" offLabel="Aus">Kontrastmodus</tournant-switch-button>

Styles

The component exposes the following CSS classes for its parts:

Classname Element
t-ui-switch-button Root
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.

You can’t perform that action at this time.