Нижние листы v-bottom-sheet

v-bottom-sheet — это компонент библиотеки Vuetify, предназначенный для создания выдвигающихся панелей с нижней части экрана. Он используется для отображения дополнительного контента, действий или информации, не загромождая основной интерфейс. В отличие от диалогов (v-dialog), нижние листы занимают нижнюю часть экрана и могут быть частично видимыми, что делает их удобными для мобильных интерфейсов.

Подключение и базовое использование

Для работы с v-bottom-sheet необходимо убедиться, что проект настроен с Vuetify и поддерживает версию 3+. Основная структура компонента выглядит следующим образом:

<template>
  <v-bottom-sheet v-model="sheet">
    <v-card>
      <v-card-title>Детали</v-card-title>
      <v-card-text>
        Здесь размещается содержимое нижнего листа.
      </v-card-text>
      <v-card-actions>
        <v-btn text @click="sheet = false">Закрыть</v-btn>
      </v-card-actions>
    </v-card>
  </v-bottom-sheet>

  <v-btn @click="sheet = true">Открыть лист</v-btn>
</template>

<script>
export default {
  data() {
    return {
      sheet: false
    }
  }
}
</script>

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

  • Свойство v-model управляет видимостью нижнего листа.
  • Внутри v-bottom-sheet можно использовать любые Vuetify-компоненты, включая карточки, списки, формы и кнопки.
  • Закрытие листа происходит через изменение состояния v-model на false.

Параметры и свойства

v-bottom-sheet поддерживает несколько важных свойств для тонкой настройки поведения:

  • persistent — предотвращает закрытие листа при клике вне него.
  • scrim — затемнение фона за листом, можно задать цвет или прозрачность.
  • max-width и max-height — ограничение размеров панели.
  • inset — сдвиг листа от краев экрана, полезно для iOS-подобного интерфейса.

Пример использования с кастомными параметрами:

<v-bottom-sheet v-model="sheet" persistent :scrim="0.6" max-width="400" inset>
  <v-card>
    <v-card-title>Фильтры поиска</v-card-title>
    <v-card-text>
      <v-text-field label="Поиск по имени"></v-text-field>
      <v-select :items="['Опция 1', 'Опция 2']" label="Выберите категорию"></v-select>
    </v-card-text>
    <v-card-actions>
      <v-btn text @click="sheet = false">Применить</v-btn>
    </v-card-actions>
  </v-card>
</v-bottom-sheet>

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

v-bottom-sheet автоматически использует анимацию выдвижения снизу, но можно дополнительно настраивать переходы с помощью слотов и классов:

  • transition — позволяет заменить стандартную анимацию на любую из встроенных (slide-y-transition, fade-transition) или кастомную.
  • v-slot:activator — удобный способ привязать открытие листа к кнопке или другому элементу без явного изменения v-model.

Пример с activator и кастомной анимацией:

<v-bottom-sheet transition="slide-y-reverse-transition" v-model="sheet">
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props">Открыть панель</v-btn>
  </template>
  <v-card>
    <v-card-title>Информация</v-card-title>
    <v-card-text>Контент с кастомной анимацией выезда снизу.</v-card-text>
  </v-card>
</v-bottom-sheet>

Интерактивный контент

Нижние листы идеально подходят для:

  • Форм ввода и фильтров.
  • Списков действий (например, меню для выбора действий с элементом).
  • Отображения краткой информации или уведомлений.

Возможности интеграции с другими компонентами Vuetify:

  • v-list внутри листа позволяет создавать меню.
  • v-form внутри листа позволяет обрабатывать данные без перехода на новый экран.
  • v-carousel или v-tabs можно использовать для отображения слайдов или вкладок внутри листа.

Мобильная адаптация

Для мобильных интерфейсов важно:

  • Использовать свойство inset для корректного отображения на устройствах с вырезами.
  • Устанавливать максимальную высоту через max-height или height="auto" для предотвращения выхода контента за экран.
  • Контролировать взаимодействие с фоном через scrim и persistent, чтобы не мешать основному UX.

Пример адаптивного листа:

<v-bottom-sheet v-model="sheet" max-height="80vh" inset scrim="0.5">
  <v-card>
    <v-card-title>Мобильные фильтры</v-card-title>
    <v-card-text>
      <v-select :items="categories" label="Категория"></v-select>
      <v-slider label="Цена" v-model="price" min="0" max="1000"></v-slider>
    </v-card-text>
    <v-card-actions>
      <v-btn text @click="sheet = false">Применить</v-btn>
    </v-card-actions>
  </v-card>
</v-bottom-sheet>

Динамическое управление

v-bottom-sheet можно открывать и закрывать программно, а также управлять его содержимым динамически:

export default {
  data() {
    return {
      sheet: false,
      content: 'Начальный текст'
    }
  },
  methods: {
    openSheet(newContent) {
      this.content = newContent;
      this.sheet = true;
    }
  }
}

Использование:

<v-btn @click="openSheet('Динамически обновленный текст')">Открыть лист</v-btn>
<v-bottom-sheet v-model="sheet">
  <v-card>
    <v-card-text>{{ content }}</v-card-text>
  </v-card>
</v-bottom-sheet>

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

Резюме ключевых возможностей

  • v-model — управление видимостью.
  • persistent, scrim, inset — контроль поведения и внешнего вида.
  • transition — кастомизация анимации.
  • v-slot:activator — упрощение связывания с элементами управления.
  • Возможность содержать формы, списки, вкладки, карусели внутри листа.
  • Поддержка адаптивного и динамического контента.

Нижние листы в Vuetify предоставляют мощный инструмент для организации интерфейса, объединяя удобство диалогов и гибкость мобильного UX.

Оглавление