Чтобы сделать хорошо выглядящие приложения Vue, нам нужно стилизовать наши компоненты.
Чтобы облегчить себе жизнь, мы можем использовать компоненты со встроенными стилями.
В этой статье мы рассмотрим, как настроить тосты.
Мы также рассмотрим, как добавлять оповещения и всплывающие подсказки.
Цель тостера
Мы можем изменить расположение тостов.
Мы можем установить свойство toaster
, чтобы изменить размещение всплывающего уведомления.
Ниже приведены возможные значения этого свойства:
b-toaster-top-right
b-toaster-top-left
b-toaster-top-center
b-toaster-top-full
b-toaster-bottom-right
b-toaster-bottom-left
b-toaster-bottom-center
b-toaster-bottom-full
Например, мы можем написать:
<template> <div id="app"> <b-button @click="makeToast()">Show toast</b-button> </div> </template> <script> export default { name: "App", methods: { makeToast() { this.$bvToast.toast(`hello`, { title: "toast", autoHideDelay: 5000, toaster: "b-toaster-bottom-right" }); } } }; </script>
Мы изменили toaster
на “b-toaster-bottom-right”
, поэтому тост будет отображаться в правом нижнем углу.
Добавить или добавить
Мы можем установить реквизит append-toast
для b-toast
на true
, чтобы добавить тост.
Авто-скрытие
Чтобы отключить автоматическое скрытие всплывающего уведомления, мы можем установить no-auto-hide
в true
.
Ссылки
Мы можем создавать тосты со ссылкой.
Для этого мы устанавливаем свойство href
.
Например, мы можем написать:
<template> <div id="app"> <b-button @click="makeToast()">Show toast</b-button> </div> </template> <script> export default { name: "App", methods: { makeToast() { this.$bvToast.toast(`hello`, { title: "toast", autoHideDelay: 5000, href: 'http://example.com' }); } } }; </script>
У нас есть свойство href
, которое делает контент ссылкой.
Итак, «привет» будет ссылкой.
б-тост
Чтобы упростить добавление нашего контента в тост, мы можем использовать компонент b-toast
.
Чтобы заполнить заголовок, мы можем заполнить слот toast-title
.
Например, мы можем написать:
<template> <div id="app"> <b-button @click="$bvToast.show('toast')">Show toast</b-button> <b-toast id="toast"> <template v-slot:toast-title> <div> <b-img blank blank-color="#ff5555" class="mr-2" width="12" height="12"></b-img>title </div> </template> <p>content</p> </b-toast> </div> </template> <script> export default { name: "App" }; </script>
Создаем тост с компонентом b-toast
.
Чтобы показать тост, мы добавили кнопку.
Вызов метода $bvToast.show(‘toast’)
вызывается с идентификатором всплывающего уведомления.
Таким образом, тост можно открыть.
Внутри слота toast-title
у нас есть компонент b-img
для отображения изображения.
У нас также есть содержимое под ним.
Теперь мы получаем всплывающее уведомление, в котором есть изображения.
Слот по умолчанию имеет тело всплывающего уведомления и состоит из всего, что находится за пределами других слотов.
Оповещения против тостов
Мы можем использовать компонент b-alert
для отображения простого предупреждения.
Например, мы можем написать:
<template> <div id="app"> <b-button @click="show = !show">Show Alert</b-button> <b-alert v-model="show" class="position-fixed" style="z-index: 2000;" variant="warning" dismissible >alert!</b-alert> </div> </template> <script> export default { name: "App", data() { return { show: false }; } }; </script>
b-alert
принимает v-model
, чтобы определить, когда он будет показан.
Если show
равно true
, будет показано оповещение.
class
— применяемые классы CSS.
style
— применяемый стиль.
dismissible
позволяет нам закрыть оповещение с помощью кнопки закрытия.
variant
позволяет нам изменить вариант стиля.
Подсказки
Мы можем добавить элементы или компоненты всплывающей подсказки с помощью компонента b-tooltip
.
Кроме того, мы можем использовать директиву v-b-tooltip
для добавления всплывающей подсказки.
Например, мы можем написать:
<template> <div id="app"> <b-button v-b-tooltip.hover title="Tooltip">Hover Me</b-button> </div> </template> <script> export default { name: "App" }; </script>
Мы добавили директиву v-b-tooltip
с модификатором hover
.
hover
означает, что всплывающая подсказка отображается при наведении.
title
— это заголовок всплывающей подсказки.
В качестве альтернативы мы можем написать:
<template> <div id="app"> <b-button id="tooltip">Hover Me</b-button> <b-tooltip target="tooltip" triggers="hover">tooltip</b-tooltip> </div> </template> <script> export default { name: "App" }; </script>
Мы устанавливаем идентификатор кнопки на tooltip
, что соответствует значению target
.
Таким образом, его можно открыть.
triggers
позволяет нам установить, что даже вызывает всплывающую подсказку.
Тогда мы получим тот же результат, что и в предыдущем примере.
Вывод
Мы можем добавить всплывающую подсказку с помощью директивы v-b-tooltip
или компонента b-tooltip
.
Оповещения — это более простые тосты, в которых не может быть столько пользовательского контента.
Тосты можно открывать в разных позициях страницы.