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