nb-toggle-light

This is a toggle component with light design for Vue.js 3+.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-selects

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbSelectComponents from '@vlalg-nimbus/nb-selects'
import "@vlalg-nimbus/nb-selects/dist/style.css";

const app = createApp(App)
app.use(NbSelectComponents)
app.mount('#app')

To use, simply call the component, in this case it will be NbToggleLight or nb-toggle-light.

Mode 1

<template>
  <NbToggleLight />
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
value	Boolean	false	Defines the initial state of the toggle (checked/unchecked)
disabled	Boolean	false	Defines if the toggle is disabled
tabIndex	Number	0	Defines the tab index. Set this property to make the toggle focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Enables the toggle to be activated with the Enter key when focused.
hasTabIndexSpace	Boolean	true	Enables the toggle to be activated with the Space key when focused.
ariaLabel	String	'Alternate Text Button'	Defines the aria-label attribute for screen readers.
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix. Example: `{ 'describedby': 'help-id', 'required': 'true' }`
theme	String	'light'	Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
borderRadius	Number	0	Defines the border-radius in rem units.
width	Number	55	Defines the toggle width in pixels. Minimum value is 55px.
paddingX	Number	1	Defines the horizontal padding in rem units.
paddingY	Number	0.2	Defines the vertical padding in rem units.
fontFamily	String	"'Lato', sans-serif"	Defines the font-family
fontSize	String	'1.6em'	Defines the font-size
fontWeight	Number	200	Defines the font-weight
hasAnimation	Boolean	false	Defines if the toggle should have text animation
textEnable	String	'On'	Defines the text displayed when toggle is enabled
textDisable	String	'Off'	Defines the text displayed when toggle is disabled
buttonSize	Number	30	Defines the button size percentage (0-50)
lightTextColor	String	'#8e8e8e'	Defines the text color for light theme. Accepts Hex color only
lightButtonColor	String	'#eaeaea'	Defines the button background color for light theme. Accepts Hex color only
lightTextBgColor	String	'#f8f8f2'	Defines the text background color for light theme. Accepts Hex color only
darkTextColor	String	'#e0e0e0'	Defines the text color for dark theme. Accepts Hex color only
darkButtonColor	String	'#2d2d2d'	Defines the button background color for dark theme. Accepts Hex color only
darkTextBgColor	String	'#3d3d3d'	Defines the text background color for dark theme. Accepts Hex color only

Events

name	Return type	Description
current-value	Boolean	Fired when an update to the value is made, returns the current value.
clicked	nothing	Fired when the toggle is clicked, returns nothing.

Example

Light Theme (default)

<template>
  <NbToggleLight
    nb-id="toggle-light-example"
    theme="light"
    :value="toggleValue"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLight',
});

const toggleValue = ref(false);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
  console.log('current-value', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Dark Theme

<template>
  <NbToggleLight
    nb-id="toggle-light-dark"
    theme="dark"
    :value="toggleValue"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLightDark',
});

const toggleValue = ref(true);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
  console.log('current-value', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Light Theme (Custom Colors)

<template>
  <NbToggleLight
    nb-id="toggle-light-light-custom"
    theme="light"
    :value="toggleValue"
    light-text-color="#1e40af"
    light-button-color="#dbeafe"
    light-text-bg-color="#bfdbfe"
    text-enable="SIM"
    text-disable="NÃO"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLightLightCustom',
});

const toggleValue = ref(false);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
  console.log('current-value', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Dark Theme (Custom Colors)

<template>
  <NbToggleLight
    nb-id="toggle-light-dark-custom"
    theme="dark"
    :value="toggleValue"
    dark-text-color="#f3f4f6"
    dark-button-color="#8b5cf6"
    dark-text-bg-color="#7c3aed"
    text-enable="YES"
    text-disable="NO"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLightDarkCustom',
});

const toggleValue = ref(true);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
  console.log('current-value', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Disabled State

<template>
  <div>
    <NbToggleLight
      nb-id="toggle-light-disabled-off"
      theme="light"
      :value="false"
      :disabled="true"
    />
    <NbToggleLight
      nb-id="toggle-light-disabled-on"
      theme="light"
      :value="true"
      :disabled="true"
    />
  </div>
</template>

<script setup>
defineOptions({
  name: 'CompToggleLightDisabled',
});
</script>

With Animation

<template>
  <NbToggleLight
    nb-id="toggle-light-animation"
    theme="light"
    :value="toggleValue"
    :has-animation="true"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLightAnimation',
});

const toggleValue = ref(false);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Custom Size and Border Radius

<template>
  <NbToggleLight
    nb-id="toggle-light-custom-size"
    theme="light"
    :value="toggleValue"
    :width="100"
    :border-radius="0.5"
    :padding-x="1.5"
    :padding-y="0.5"
    :button-size="35"
    @clicked="logEvent()"
    @current-value="handleCurrentValue($event)"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompToggleLightCustomSize',
});

const toggleValue = ref(false);

const handleCurrentValue = (value) => {
  toggleValue.value = value;
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Nb Selectsnb-toggle-skewed

Nb Imagesnb-image-gallery