Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@tournant/switch-button

0.1.4 • Public • Published

@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.

Keywords

none

Install

npm i @tournant/switch-button

DownloadsWeekly Downloads

1

Version

0.1.4

License

MIT

Unpacked Size

20.6 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar