QBanner баннеры

QBanner — это компонент из библиотеки Quasar, предназначенный для отображения информационных, предупреждающих или рекламных баннеров в приложениях на Vue.js. Он обеспечивает гибкую настройку визуального вида, поведения и интерактивности, позволяя создавать как статические уведомления, так и динамически управляемые баннеры.

Основная структура QBanner

Компонент QBanner представляет собой контейнер с возможностью размещения внутри заголовка, текста и элементов управления. Базовый синтаксис выглядит следующим образом:

<q-banner class="bg-primary text-white">
  <template v-slot:avatar>
    <q-icon name="info" />
  </template>

  Важная информация для пользователей приложения.

  <template v-slot:action>
    <q-btn flat label="Закрыть" @click="visible = false" />
  </template>
</q-banner>

Разбор структуры:

  • v-slot:avatar — слот для иконки или изображения, которое будет отображаться слева от текста.
  • Основное содержимое между тегами <q-banner> — текст или HTML, который отображается пользователю.
  • v-slot:action — слот для действий, например кнопки закрытия, перехода по ссылке или вызова модального окна.
  • class — стандартная возможность Quasar для установки цвета, фона и текста.

Свойства QBanner

QBanner обладает набором свойств, позволяющих гибко управлять его поведением:

  • dense — делает баннер компактнее, уменьшая вертикальные отступы.
  • inline-actions — размещает все действия в одной линии с текстом, без переноса на отдельную строку.
  • sticky — фиксирует баннер в верхней части контейнера при скролле.
  • square — убирает скругления углов, делая баннер строгим по форме.
  • rounded — добавляет стандартное скругление углов, особенно актуально для карточек или панелей.
  • class и style — позволяют полностью контролировать внешний вид, включая цвета, тени и отступы.

Пример с несколькими свойствами:

<q-banner dense square class="bg-warning text-black">
  Внимание: обновление системы будет произведено в 10:00.
  <template v-slot:action>
    <q-btn flat label="Подробнее" @click="showDetails" />
  </template>
</q-banner>

Управление видимостью

Обычно баннеры отображаются по событию или состоянию приложения. Для этого используется реактивная переменная:

<template>
  <q-banner v-if="isVisible" class="bg-info text-white">
    Система обновлена успешно.
    <template v-slot:action>
      <q-btn flat icon="close" @click="isVisible = false" />
    </template>
  </q-banner>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);
</script>

Ключевые моменты:

  • Использование v-if обеспечивает полное удаление компонента из DOM при скрытии.
  • Кнопка закрытия через @click управляет состоянием реактивной переменной.
  • Можно интегрировать с Vuex или Pinia для глобального управления видимостью баннеров.

Стилизация и кастомизация

QBanner поддерживает как встроенные классы Quasar (bg-primary, text-white), так и полностью кастомные стили. Примеры кастомизации:

  • Изменение отступов и шрифтов:
<q-banner class="custom-banner">
  <span class="custom-text">Обновление доступно!</span>
</q-banner>

<style scoped>
.custom-banner {
  padding: 12px 24px;
  background-color: #ffeb3b;
}

.custom-text {
  font-weight: 600;
  font-size: 16px;
}
</style>
  • Анимация появления/скрытия с помощью QTransition:
<q-transition name="fade">
  <q-banner v-if="showBanner" class="bg-positive text-white">
    Операция выполнена успешно.
  </q-banner>
</q-transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

Интерактивные баннеры

Баннеры часто используются не только для уведомлений, но и для интерактивных действий:

  • Добавление кнопок действия:
<q-banner class="bg-secondary text-white">
  Новая функция доступна!
  <template v-slot:action>
    <q-btn flat label="Попробовать" @click="tryFeature" />
    <q-btn flat label="Скрыть" @click="showBanner = false" />
  </template>
</q-banner>
  • Встраивание ссылок и других компонентов:
<q-banner class="bg-info text-white">
  Для подробностей перейдите на
  <q-btn flat label="Сайт" @click="openWebsite" />
</q-banner>

Комбинирование с другими компонентами

QBanner отлично сочетается с другими элементами Quasar:

  • С карточками (QCard) для уведомлений внутри контента.
  • С модальными окнами (QDialog) для отображения детальной информации.
  • С панелями (QToolbar) для закрепления баннеров в верхней части интерфейса.

Пример интеграции с QCard:

<q-card>
  <q-banner class="bg-warning text-black">
    Внимание: новые правила использования!
    <template v-slot:action>
      <q-btn flat label="Подробнее" />
    </template>
  </q-banner>
  <q-card-section>
    Основной контент карточки здесь.
  </q-card-section>
</q-card>

Продвинутые техники

  1. Динамическая генерация баннеров: хранение массива уведомлений и отображение их с помощью v-for.
  2. Автоматическое скрытие: использование setTimeout для скрытия баннера через заданное время.
  3. Реактивные классы: изменение цвета и иконки в зависимости от состояния или типа сообщения (info, warning, error, success).

Пример автоматического скрытия:

<q-banner v-if="showBanner" class="bg-positive text-white">
  Данные сохранены.
  <template v-slot:action>
    <q-btn flat icon="close" @click="showBanner = false" />
  </template>
</q-banner>

<script setup>
import { ref, onMounted } from 'vue';

const showBanner = ref(true);

onMounted(() => {
  setTimeout(() => showBanner.value = false, 5000);
});
</script>

Вывод

QBanner — универсальный компонент Quasar для уведомлений и баннеров, предоставляющий полный контроль над визуальным оформлением, поведением и интерактивностью. Его гибкость позволяет использовать баннеры в качестве информационных блоков, действий пользователя и даже рекламных вставок внутри приложения, с простым управлением через реактивные данные Vue.js.

Оглавление