VsFormCheckbox

VsFormCheckbox - елемент інтерфейсу, який дозволяє користувачу вибирати одне або кілька значень з певного набору. Компонент може бути налаштований для різних розмірів та параметрів стилізації.

Підключення

hbs

{{{_vue "vst-form-checkbox"}}}

Component API

Style

Name	Description	Type
size	Розмір чекбоксу (mini, small, large)	String
color	Колір чекбоксу. Доступні кольори	String

State

Name	Description	Type
disabled	Чи відключити чекбокс	Boolean
multiple	Мультичекбокс, йде разом з пропсом options	Boolean

Content

Name	Description	Type
options	Масив об'єктів, по дефолту передбачено, що у них є властивості label та value(v-model). Щоб змінити властивість, потрібно додати та визначити пропс valueProperty	Array
label	Заголовок для сінгл-чекбоксу. Працює тільки у купі з пропсом options	String

Slots

Name	Description	Type
default	Масив об'єктів, по дефолту передбачено, що у них є властивості label та value(v-model). Щоб змінити властивість, потрібно додати та визначити пропс valueProperty	Array

Events

Name	Description	Return value
@change	Івент зміни значення компоненти	Boolean

Приклади

Декілька значень

Крім одного чекбоксу можна задавати перелік значень через пропс options (обов'язково задати v-model).

    <template>
      <div>
        <VsFormCheckbox :options="['option 1', 'option 2']" v-model="multiCheckbox" />
        value: {{multiCheckbox}}
      </div>
     </template>
     <script>
      export default {
          data() {
            return {
              multiCheckbox: []
            }  
          }
      }
    </script>
  

Розміри

Окрім розміру за замовчуванням (md), компонента надає додаткові розміри для вибору. Використовуйте розмір атрибута, щоб установити додаткові розміри (xs, sm, md, lg, xl).

    <div class="flex flex-col">
      <VsFormCheckbox :label="'xs'" size="xs"/>
      <VsFormCheckbox :label="'sm'" size="sm" class="mb-1" />
      <VsFormCheckbox :label="'md'" size="md" class="mb-1" />
      <VsFormCheckbox :label="'lg'" size="lg" class="mb-2" />
      <VsFormCheckbox :label="'xl'" size="xl" class="mb-1" />
    </div>
  

Кольори

Акцентні кольори для чекбоксу. Default - blue. Доступні кольори

    <template>
    <div class="flex gap-2">
        <VsFormCheckbox color="yellow" v-model="yellow" size="lg" />
        <VsFormCheckbox color="green" v-model="green" size="lg"/>
        <VsFormCheckbox color="blue" v-model="blue" size="lg"/>
        <VsFormCheckbox color="violet" v-model="violet" size="lg"/>
        {{ {blue,green,yellow,violet} }}
    </div>
    </template>
    <script>
      export default {
        data() {
          return {
            isChecked: true,
            blue: true,
            green: true,
            yellow: true,
            violet: true,
          };
        },
      };
    </script>