Флажки позволяют пользователям выбирать между двумя значениями. Их можно использовать при попытке получить логический ввод (истина или ложь), например, отметить задачу в приложении списка дел, чтобы показать завершение, или решить, следует ли принимать лицензионное соглашение в пользовательском интерфейсе. В этой статье мы узнаем, как создавать флажки в Vuetify.

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

Vuetify предоставляет компонент v-checkbox для создания флажков:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox></v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Установка значения флажка из кода

Чтобы управлять текущим значением флажка, мы можем использовать v-model для создания двусторонней привязки между v-checkbox и переменной.

<template>
  <v-app>
    <div class="ma-2 d-flex justify-center">
      <v-checkbox v-model="checked"></v-checkbox>
    </div>
    <div class="ma-2 d-flex justify-center">
      <v-btn color="indigo" dark @click="checked = true">Check</v-btn>
    </div>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    checked: false,
  }),
};
</script>

В приведенном выше коде мы создали флажок и кнопку под ним.

Нажатие кнопки установит checked в true, и это отразится на флажке:

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

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

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

Метки флажков Vuetify

Мы можем пометить флажок Vuetify реквизитом label:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox v-model="checked" label="Coding Beauty"></v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    checked: false,
  }),
};
</script>

Слот для метки флажка Vuetify

Чтобы включить содержимое HTML в метку флажка, мы можем поместить его в слот label:

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox color="indigo" input-value="true">
        <template v-slot:label>
          Visit the&nbsp;
          <a
            target="_blank"
            href="https://codingbeautydev.com"
            @click.stop
            v-on="on"
          >
            Coding Beauty website
          </a>
        </template>
      </v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Настройка цвета флажка в Vuetify

Свойство color позволяет нам установить цвет фона флажка, когда он отмечен:

<template>
  <v-app>
    <v-row class="ma-2" justify="center">
      <v-checkbox
        v-model="checked"
        label="Coding Beauty"
        color="green"
      ></v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
  data: () => ({
    checked: false,
  }),
};
</script>

Флажок отключен

Мы можем отключить интерактивность флажков с помощью реквизита disabled. Он больше не будет принимать ввод, когда он отключен.

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox
        label="on disabled"
        color="green"
        input-value="true"
        disabled
      ></v-checkbox>
      <v-checkbox
        label="off disabled"
        color="green"
        disabled
      ></v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Неопределенный флажок

Мы можем сделать флажок неопределенным, используя свойство indeterminate.

<template>
  <v-app>
    <v-row class="ma-2" justify="space-around">
      <v-checkbox label="indeterminate" color="red" indeterminate></v-checkbox>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

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

Мы можем использовать флажок, когда нам нужно принять логический ввод. Vuetify предоставляет компонент v-checkbox для его создания и предоставляет различные реквизиты для настройки.

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

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