Switch

Компонент світча

Підключення

hbs

{{{_vue 'vs-form-switch'}}}

Style

Name	Description	Type
size	Розмір світчу xs, sm, md, lg, xl	String
color	Колір світчу. Доступні кольори	String

State

Name	Description	Type
disabled	Визначає, чи cвітч вимкнений	Boolean

Content

Name	Description	Type
activeIcon	Назва іконки для активного стейту	String
inactiveIcon	Назва іконки для неактивного стейту	String

Events

Name	Description	Return value
@change	Дія зміни стейту світча	Boolean

Приклади

Розміри

Окрім розміру за замовчуванням (sm), компонент надає такі додаткові розміри: xs, sm, lg.

<template>
        <div class="flex gap-2 flex-col">
            <div class="flex gap-2">
            <VsFormSwitch v-model="xs" size="xs"></VsFormSwitch>
            {{xs}}
            </div>
            <div class="flex gap-2">
            <VsFormSwitch v-model="sm" size="sm"></VsFormSwitch>
            {{sm}}
            </div>
             <div class="flex gap-2">
            <VsFormSwitch v-model="md"  size="md"></VsFormSwitch>
            {{md}}
            </div>
             <div class="flex gap-2">
            <VsFormSwitch v-model="lg" size="lg"></VsFormSwitch>
            {{lg}}
            </div>
        </div>
    </template>
    <script>
      export default {
        data() {
          return {
            xs: false,
            sm: false,
            md: false,
            lg: false,
          };
        },
      };
    </script>

Контент

Можна додавати іконку або текст поряд зі світчем. Ви можете знайти список іконок на сайті Tabler.

    <div class="flex flex-col gap-2">
        <VsFormSwitch v-model="switchValue" activeText="active"  inactiveText="inactive"></VsFormSwitch>
        <VsFormSwitch v-model="switchValue" activeIcon="ti ti-brand-tabler"  inactiveIcon="ti ti-brand-tabler"></VsFormSwitch>
    </div>