BottomSheet плагин

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

Подключение и базовый вызов

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

import { BottomSheet } from 'quasar';

Вызов производится через метод BottomSheet.create(options), где options — объект конфигурации. Минимальная структура:

BottomSheet.create({
  title: 'Выберите действие',
  options: [
    { label: 'Удалить', icon: 'delete', handler: () => console.log('Удаление') },
    { label: 'Редактировать', icon: 'edit', handler: () => console.log('Редактирование') },
    { label: 'Отмена', icon: 'close', handler: () => console.log('Отмена') }
  ]
});

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

  • title — заголовок панели.

  • options — массив объектов с полями:

    • label — текст кнопки.
    • icon — иконка из библиотеки Material Icons.
    • handler — функция, выполняемая при выборе опции.

Настройка внешнего вида

BottomSheet поддерживает различные стили оформления:

  • Кастомные CSS-классы:
BottomSheet.create({
  title: 'Действия',
  class: 'my-bottom-sheet',
  options: [...]
});

В my-bottom-sheet можно добавить собственные стили, например, скругления углов или тень.

  • Поддержка темы: через dark или light:
BottomSheet.create({
  title: 'Выбор режима',
  dark: true,
  options: [...]
});
  • Размер и положение: по умолчанию панель занимает всю ширину экрана, но можно ограничить ширину через CSS.

Обработка действий

Каждая опция в options имеет обработчик handler. Он вызывается при выборе пользователя. Важно помнить:

  • handler может быть асинхронным:
{ 
  label: 'Загрузить', 
  icon: 'cloud_upload', 
  handler: async () => { 
    await uploadFile(); 
  } 
}
  • Если необходимо закрыть BottomSheet программно, используется метод hide():
const sheet = BottomSheet.create({...});
sheet.hide();
  • Для получения результата через промисы можно использовать onOk и onCancel:
BottomSheet.create({
  title: 'Выберите действие',
  options: [
    { label: 'Сохранить', handler: () => 'save' },
    { label: 'Отмена', handler: () => 'cancel' }
  ]
}).onOk(result => console.log(result));

Использование кастомного контента

BottomSheet можно использовать не только для списков опций, но и для произвольного контента через слот component. Пример с Vue-компонентом:

import CustomContent from './CustomContent.vue';

BottomSheet.create({
  component: CustomContent,
  componentProps: { message: 'Привет, мир!' }
});

Особенности:

  • componentProps передает свойства в кастомный компонент.
  • Можно использовать любые Vue-компоненты с полноценным реактивным функционалом.

Анимации и взаимодействие

BottomSheet имеет встроенные анимации появления и скрытия, которые можно настроить через transitionShow и transitionHide:

BottomSheet.create({
  title: 'Анимация',
  transitionShow: 'slide-up',
  transitionHide: 'slide-down',
  options: [...]
});
  • Поддерживаются стандартные анимации Quasar: slide-up, fade, zoom, flip.
  • Можно комбинировать кастомные CSS-анимации для уникального эффекта.

Советы по UX

  • Для большого количества опций лучше использовать разделители (divider) между группами.
  • BottomSheet не рекомендуется перегружать контентом, оптимально для 3–7 быстрых действий.
  • Для длинного списка действий можно комбинировать с прокручиваемым контейнером.

Пример интеграции с состоянием Vuex

BottomSheet может динамически формировать список опций из состояния приложения:

import { useStore } from 'vuex';

const store = useStore();
BottomSheet.create({
  title: 'Выбор проекта',
  options: store.state.projects.map(project => ({
    label: project.name,
    handler: () => store.dispatch('selectProject', project.id)
  }))
});

Таким образом, список всегда актуален, и действия привязаны к состоянию приложения.

Важные методы и свойства

Метод / Свойство Назначение
create(options) Создает новый BottomSheet
hide() Закрывает BottomSheet
onOk(callback) Вызывается при выборе действия
onCancel(callback) Вызывается при отмене
component Используется для кастомного Vue-компонента
componentProps Передача props в кастомный компонент
class Добавление CSS-классов для кастомизации
dark / light Установка темы

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

Оглавление