nb-toggle-flip

This is a toggle component with 3D flip animation effect 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 NbToggleFlip or nb-toggle-flip.

Mode 1

<template>
  <NbToggleFlip />
</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	86	Defines the toggle width in pixels. Minimum value is 86px.
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	400	Defines the font-weight
textEnable	String	'On'	Defines the text displayed when toggle is enabled
textDisable	String	'Off'	Defines the text displayed when toggle is disabled
lightTextColorOn	String	'#4a4a4a'	Defines the text color when enabled for light theme. Accepts Hex color only
lightTextColorOnHover	String	'#3a3a3a'	Defines the text color on hover when enabled for light theme. Accepts Hex color only
lightTextColorOff	String	'#585858'	Defines the text color when disabled for light theme. Accepts Hex color only
lightTextColorOffHover	String	'#707070'	Defines the text color on hover when disabled for light theme. Accepts Hex color only
lightButtonColorOn	String	'#f8f8f2'	Defines the button background color when enabled for light theme. Accepts Hex color only
lightButtonColorOnHover	String	'#e8e8e2'	Defines the button background color on hover when enabled for light theme. Accepts Hex color only
lightButtonColorOff	String	'#d5d5d5'	Defines the button background color when disabled for light theme. Accepts Hex color only
lightButtonColorOffHover	String	'#c0c0c0'	Defines the button background color on hover when disabled for light theme. Accepts Hex color only
darkTextColorOn	String	'#f8f8f8'	Defines the text color when enabled for dark theme. Accepts Hex color only
darkTextColorOnHover	String	'#ffffff'	Defines the text color on hover when enabled for dark theme. Accepts Hex color only
darkTextColorOff	String	'#909090'	Defines the text color when disabled for dark theme. Accepts Hex color only
darkTextColorOffHover	String	'#b0b0b0'	Defines the text color on hover when disabled for dark theme. Accepts Hex color only
darkButtonColorOn	String	'#3d3d3d'	Defines the button background color when enabled for dark theme. Accepts Hex color only
darkButtonColorOnHover	String	'#4d4d4d'	Defines the button background color on hover when enabled for dark theme. Accepts Hex color only
darkButtonColorOff	String	'#2c2c2c'	Defines the button background color when disabled for dark theme. Accepts Hex color only
darkButtonColorOffHover	String	'#2d2d2d'	Defines the button background color on hover when disabled 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>
  <NbToggleFlip
    nb-id="toggle-flip-light"
    theme="light"
    :value="toggleValue"
    @changed="handleChange($event)"
    @current-value="handleCurrentValue($event)"
    @clicked="logEvent()"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};

const handleCurrentValue = (value) => {
  console.log('Current value:', value);
};

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

Dark Theme

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

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

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

const toggleValue = ref(true);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};

const handleCurrentValue = (value) => {
  console.log('Current value:', value);
};

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

Light Theme (Custom Colors)

<template>
  <NbToggleFlip
    nb-id="toggle-flip-light-custom"
    theme="light"
    :value="toggleValue"
    light-button-color-on="#dbeafe"
    light-button-color-on-hover="#bfdbfe"
    light-button-color-off="#e5e7eb"
    light-button-color-off-hover="#d1d5db"
    light-text-color-on="#1e40af"
    light-text-color-off="#6b7280"
    text-enable="SIM"
    text-disable="NÃO"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};
</script>

Dark Theme (Custom Colors)

<template>
  <NbToggleFlip
    nb-id="toggle-flip-dark-custom"
    theme="dark"
    :value="toggleValue"
    dark-button-color-on="#8b5cf6"
    dark-button-color-on-hover="#7c3aed"
    dark-button-color-off="#4b5563"
    dark-button-color-off-hover="#374151"
    dark-text-color-on="#f3f4f6"
    dark-text-color-off="#9ca3af"
    text-enable="YES"
    text-disable="NO"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(true);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};
</script>

Disabled State

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

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

Custom Size and Border Radius

<template>
  <NbToggleFlip
    nb-id="toggle-flip-custom-size"
    theme="light"
    :value="toggleValue"
    :width="120"
    :border-radius="0.5"
    :padding-x="1.5"
    :padding-y="0.5"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
};
</script>

Nb Selectsnb-toggle

Nb Selectsnb-toggle-skewed