Как создать радиокнопки с помощью Vuetify

Полное руководство по созданию и настройке переключателей Vuetify. Используйте их для получения пользовательского ввода из предопределенного набора параметров.

Радиокнопки полезны, когда вам нужно получить пользовательский ввод из группы опций. Например, пользователи могут выбрать предпочтительный язык или страну вместе с ними. В этой статье мы узнаем, как создавать и настраивать переключатели с помощью Vuetify.

Компонент v-radio

Используйте компонент v-radio для создания простого переключателя:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio></v-radio>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Ярлыки радиокнопок

Чтобы описать радиокнопку пользователю, мы можем использовать реквизит label:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio label="Radio"></v-radio>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Радиокнопки обычно используются с радиогруппами в Vuetify. Мы можем сделать это, обернув все v-radio в v-radio-group. Затем мы можем настроить двустороннюю привязку с компонентом группы переключателей через v-model, что позволит нам получить доступ и установить выбранный в данный момент переключатель в группе:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup">
        <v-radio
          v-for="n in 3"
          :key="n"
          :label="`Radio ${n}`"
          :value="n"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    radioGroup: 1,
  }),
};
</script>

Щелчок по другому переключателю в группе обновит переменную и изменит выбор:

Украсьте с помощью Vuetify

Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.

Скачайте бесплатную копию здесь!

Пользовательские цвета радиокнопки

Компонент радиокнопки имеет свойство color, которое мы можем использовать для настройки его цвета:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup">
        <v-radio
          v-for="(color, i) in colors"
          :key="i"
          :label="color"
          :value="color"
          :color="color"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    colors: ['indigo', 'yellow', 'error', 'green', 'primary'],
  }),
};
</script>

Направления радиокнопки

Мы можем использовать реквизит row для горизонтального представления радиокнопок:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" row>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Свойство column будет отображать переключатели вертикально и является направлением по умолчанию:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" column>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Обеспечение обязательного значения

Чтобы убедиться, что группа радио всегда имеет значение, установите свойство mandatory на true:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" mandatory>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Этикетки с HTML

Если мы хотим включить HTML в метку радиогруппы, мы можем поместить содержимое в слот label группы v-radio-group:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="radioGroup" mandatory>
        <template v-slot:label> Pick an <strong>option</strong> </template>
        <v-radio
          v-for="i in 3"
          :key="i"
          :label="`Option ${i}`"
          :value="i"
        ></v-radio>
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Мы также можем включить HTML в метки радиокнопок с их собственными label слотами:

<template>
  <v-app>
    <div class="d-flex justify-center mt-4">
      <v-radio-group v-model="selected">
        <template v-slot:label>
          Select your default <strong>search engine</strong>
        </template>
        <v-radio v-for="(url, name) in searchEngines" :key="name" :value="name"
          ><template v-slot:label
            ><a :href="url">{{ name }}</a></template
          ></v-radio
        >
      </v-radio-group>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    selected: 'Google',
    searchEngines: {
      Bing: 'https://bing.com',
      Google: 'https://google.com',
      Duckduckgo: 'https://duckduckgo.com',
    },
  }),
};
</script>

Краткое содержание

Мы можем создать группу переключателей, когда хотим получать пользовательский ввод из предопределенного набора параметров. Vuetify предоставляет компонент v-radio для создания переключателей и компонент v-radio-group для добавления к ним группируемых функций. Эти компоненты поставляются с различными реквизитами для настройки.

Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе последних советов и руководств по Vuetify и Vue!

Получить обновленную статью на codingbeautydev.com.