Мы используем оповещение для передачи важной информации пользователям с помощью контекстных иконок и цветов. Значок и цвет соответствуют типу сообщения, которое он передает пользователю. В этой статье мы узнаем, как создавать и настраивать оповещения.
Компонент v-alert
Vuetify предоставляет компонент v-alert для создания предупреждений:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-alert> Alert Component </v-alert> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Использование v-alert без каких-либо реквизитов создает простое оповещение, содержащее текст, без какого-либо цвета, рамки или значка:
Предупреждающие цвета
Свойство color для v-alert позволяет нам настроить цвет компонента оповещения.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="indigo" dark> Alert Component </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Предупреждение о границах
Свойство border добавляет границу к одной из 4 сторон оповещения. Это четыре возможных значения для каждой из сторон: top, bottom, left и right.
<template>
<v-app>
<div class="d-flex justify-center ma-4">
<v-col sm="6">
<v-alert border="top" color="red lighten-2" dark>
I'm an alert with a top border and red color
</v-alert>
<v-alert border="right" color="green" dark>
I'm an alert with a right border and green color
</v-alert>
<v-alert border="bottom" color="pink darken-1" dark>
I'm an alert with a bottom border and pink color
</v-alert>
<v-alert border="left" color="indigo" dark>
I'm an alert with a left border and indigo color
</v-alert>
</v-col>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Цветная рамка
colored-prop удалит фон предупреждения, чтобы подчеркнуть границу, чей цвет установлен на значение реквизита color:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert border="left" color="indigo" colored-border elevation="2"> An alert with a colored border </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Плотное оповещение
Установка пропеллера dense на true на v-alert сделает его более компактным за счет уменьшения высоты.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert dense type="info"> Dense alert of type info </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Когда установлено border, толщина границы будет уменьшена, чтобы оставаться в соответствии с плотным стилем:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert dense type="info" border="right"> Dense alert of type info </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Отклоняемое предупреждение
Свойство dimissable добавляет кнопку значок закрытия в конце компонента предупреждения.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert border="top" color="green" dismissible dark> Dismissable alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Нажатие кнопки закрытия установит оповещение с value на false, что скроет оповещение:
Двусторонняя привязка с v-моделью
Мы также можем напрямую управлять видимостью оповещения из кода, используя v-model для создания двусторонней привязки между переменной и оповещением value.
Чтобы увидеть, как это сделать на практике, давайте создадим кнопку под теперь скрытым предупреждением из нашего предыдущего примера кода. Мы также настроим двустороннюю привязку между переменной alert и видимостью оповещения.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert border="top" color="green" dismissible dark v-model="alert"> Dismissable alert </v-alert> </v-col> </div> <div class="d-flex justify-center ma-4"> <v-btn color="primary" @click="alert = true">Reset</v-btn> </div> </v-app> </template><script> export default { name: 'App', data: () => ({ alert: true, }), }; </script>
Нажатие кнопки установит alert в true, что восстановит видимость оповещения.
Значки предупреждений
Мы можем включить значок в начале оповещения с реквизитом icon.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert border="top" color="red accent-2" dark icon="mdi-star"> An alert with an icon </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Оповещение о высоте
Мы можем настроить высоту, которую имеет компонент оповещения, используя свойство elevation. Это свойство может принимать любое значение от 0 до 24.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert border="top" color="orange" colored-border elevation="5"> Elevated alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Предупреждение
Установка реквизита outlined на true отобразит обведенный вариант предупреждения. Этот обведенный стиль делает фон предупреждения прозрачным и устанавливает цвет его границы и текста равным значению реквизита color.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="green" outlined> Outlined alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Выдающееся предупреждение
Свойство prominent делает оповещение более заметным, увеличивая высоту и применяя ореол к значку:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="red accent-2" prominent icon="mdi-school" dark> Prominent alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Текстовое оповещение
Вариант текстового оповещения имеет уменьшенную непрозрачность фона. Мы можем установить оповещение об этом альтернативном стиле с помощью реквизита text:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="teal" text> Text alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Предупреждение в форме
Установка свойства shaped на true в предупреждении добавит радиус границы в левом верхнем и правом нижнем углу предупреждения:
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="blue" shaped dark> Shaped alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Пользовательские переходы
Мы можем настроить переход, который показывает оповещение при переключении его видимости, используя свойство transition. Например, в приведенном ниже коде мы устанавливаем свойство transition на scale-transition, что заставит оповещение отображать переход шкалы, когда оно скрыто или показано.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-btn color="primary" @click="alert = !alert"> Toggle </v-btn> </div> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert color="indigo" dark transition="scale-transition" v-model="alert" > Shaped alert </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', data: () => ({ alert: false, }), }; </script>
Типы оповещений
v-alert поставляется с реквизитом type, который предоставляет 4 стиля, которые изменяют значок и цвет предупреждения. Это стили success, info, warning и error.
<template> <v-app> <div class="d-flex justify-center ma-4"> <v-col sm="6"> <v-alert type="success"> I'm a success alert. </v-alert> <v-alert type="info"> I'm an info alert. </v-alert> <v-alert type="warning"> I'm a warning alert. </v-alert> <v-alert type="error"> I'm an error alert. </v-alert> </v-col> </div> </v-app> </template><script> export default { name: 'App', }; </script>
Краткое содержание
Оповещение полезно для передачи важной информации нашим пользователям с помощью контекстных иконок и цветов. Vuetify предоставляет компонент v-alert для создания и настройки предупреждений.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе всех последних советов и руководств по Vuetify и Vue.
Получить обновленную статью на codingbeautydev.com.
