Node People Magic

    @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

    • marcus-herrmann
    • ovl