VsFormRadio

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

Підключення

hbs

{{{_vue "vs-form-radio"}}}

Component API

Style

Name	Description	Type
styleOption	Стиль радіокнопок. Доступні опції: button, outline, default	String
orientation	Орієнтація радіо-груп. За замовчуванням inline. Доступні опції: vertical, inline	String
color	Акцентний колір компонента. Default - blue. Доступні кольори	String

State

Name	Description	Type
disabled	Визначає, чи радіокнопка вимкнена	Boolean

Content

Name	Description	Type
options	Масив об'єктів або стрінгових значень для вибору. Об'єкт може складатися з властивості id або value, що піде у v-model, та властивості, що піде як текст у радіокнопку (text,label,title)	Array

Events

Name	Description	Return value
@change	Реалізує клік по компоненту	String

Slots

Name	Description	Default
default	Дефолтний слот, зазвичай у радіокнопку вставляється текст, іконка	<template>...</template>

Приклади

Зовнішній вигляд

Окрім базового вигляду кнопки default можна вибрати ще обрати border.

default:

      <template>
        <div  class="flex flex-col gap-2">
        <span>Обране значення: {{radio}}</span>
          <VsFormRadio :options="['option 1', 'option 2']"  v-model="radio" />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              radio: "option 1",
            };
          },
        };
      </script>
  

border:

      <template>
        <div  class="flex flex-col gap-2">
          <span>Обране значення: {{radio}}</span>
          <VsFormRadio :options="['button 1', 'button 2']" inputStyle="border" v-model="radio" />
        </div>
      </template>
      <script>
        export default {
          data() {
            return {
              radio: "button 1",
            };
          },
        };
      </script>
  

Задання опцій через масив рядків

Варіанти радіокнопок можна задавати через масив рядків options - ["val 1", "val 2"].

    <template>
      <div  class="flex flex-col gap-2">
          <span>Обране значення: {{radio}}</span>
          <VsFormRadio :options="['option 1', 'option 2']" v-model="radio" />
      </div>
    </template>
      <script>
        export default {
          data() {
            return {
              radio: "option 1",
            };
          },
        };
      </script>
  

Задання опцій через масив об'єктів

Варіанти радіокнопок також можна задавати через масив об'єктів options. Об'єкт може складатися з властивості id або value, що піде у v-model, та властивості, що піде як текст у радіокнопку (text,label,title).

    <template>
      <div  class="flex gap-2 flex-col">
          <span>Обране значення: {{radio}}</span>
          <VsFormRadio
            :options="[
              { id: 'option 1', text: 'object option 1' },
              { id: 'option 2', text: 'object option 2' },
            ]"
            v-model="radio"
          />
      </div>
      </template>
        <script>
          export default {
            data() {
              return {
                radio: "option 1",
              };
            },
          };
        </script>
  

Inline Орієнтація

    <template>
    <div  class="flex gap-2 flex-col">
      <span>Обране значення: {{radio}}</span>
      <VsFormRadio :options="['option 1', 'option 2']" orientation="inline" styleOption="button"  v-model="radio"/>
      </div>
      </template>
        <script>
          export default {
            data() {
              return {
                radio: "option 1",
              };
            },
          };
        </script>
  

Vertical Орієнтаціяа в

      <template>
      <div  class="flex gap-2 flex-col">
        <span>Обране значення: {{radio}}</span>
        <VsFormRadio :options="['1', '2']" orientation="vertical" styleOption="button"  v-model="radio" />
      </div>
      </template>
        <script>
          export default {
            data() {
              return {
                radio: "1",
              };
            },
          };
        </script>
 

Disabled

Атрибут disabled визначає, чи радіокнопки вимкнені. Він приймає логічне значення.

     <VsFormRadio :options="['test', 'test1']" orientation="inline" styleOption="outline" :disabled="true" />