Robuust Vue Components

Appearance

Lightswitch Component ​

The Lightswitch component is built with Vue 3 and Headless UI. Possibility to add an Label with a custom Slot.

Installation ​

To use the Lightswitch component you need to install the @headlessui/vue package.

bash
yarn add @robuust-digital/vue-components @headlessui/vue

Import the component from the lightswitch package ​

js
import { Lightswitch } from '@robuust-digital/vue-components/lightswitch';

Import CSS ​

css
@import "@robuust-digital/vue-components/lightswitch/css";

Basic Usage ​

Import and use Lightswitch in your Vue components as follows:

vue
<template>
  <Lightswitch v-model="lightswitch1" />
</template>

<script setup>
import { Lightswitch } from '@robuust-digital/vue-components/lightswitch';
</script>

Slots ​

Below is example to edit the custom slot of Lightswitch:

Lightswitch with a custom slot ​

Show code
vue
<template>
  <Lightswitch v-model="lightswitch">
    Every year <span class="font-normal text-slate-600">(save 10%)</span>
  </Lightswitch>
</template>

CSS Customization ⚡️ ​

To customize the lightswitch styles global

css
:root {
  /* Available variables */
  --rvc-lightswitch-transition-duration: var(--rvc-base-transition-duration);
  --rvc-lightswitch-transition-timing-function: var(--rvc-base-transition-timing-function);
  --rvc-lightswitch-toggle-transition-duration: var(--rvc-base-transition-duration);
  --rvc-lightswitch-toggle-transition-timing-function: var(--rvc-base-transition-timing-function);
  --rvc-lightswitch-border-radius: calc(infinity * 1px);
  --rvc-lightswitch-height: 1.875rem;
  --rvc-lightswitch-width: 3.125rem;
  --rvc-lightswitch-bg-color: var(--color-slate-200);
  --rvc-lightswitch-bg-color-enabled: var(--color-green-400);
  --rvc-lightswitch-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-lightswitch-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-lightswitch-transition-property: colors;
  --rvc-lightswitch-label-offset: 0.5rem;
  --rvc-lightswitch-toggle-offset: 0.1875rem;
  --rvc-lightswitch-toggle-size: calc(var(--spacing) * 6);
  --rvc-lightswitch-toggle-bg-color: var(--color-white);
  --rvc-lightswitch-toggle-transition-property: transform;
}

Examples ​

Default lightswitch ​

Show code
vue
<Lightswitch v-model="lightswitch"/>

Checked lightswitch ​

Show code
vue
<Lightswitch v-model="lightswitch"/>