Нижний лист

Нижний лист - это изменённый v-dialog, который скользит с низа экрана, подобно v-bottom-nav. В то время как компонент v-bottom-nav предназначен для кнопок и конкретных действий уровня приложения, нижний лист может содержать что угодно.

Применение

Here we display an example list of actions that could be present in an application.

API

v-bottom-sheet
Имя
disabled
По умолчанию
false
Тип
boolean

Отключает возможность открытия диалога

Имя
full-width
По умолчанию
false
Тип
boolean

Форсировать 100% ширины

Имя
hide-overlay
По умолчанию
false
Тип
boolean

Скрыть показ наложения

Имя
inset
По умолчанию
false
Тип
boolean

Уменьшает максимальную ширину содержимого диалогового окна до 70%

Имя
lazy
По умолчанию
false
Тип
boolean

Условно отображает контент на смонтированном. Будет показывать только контент, если он активирован

Имя
max-width
По умолчанию
auto
Тип
string | number

Укажите максимальную ширину листа контейнера

Имя
persistent
По умолчанию
false
Тип
boolean

Клик снаружи не отменяет диалог

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Примеры

Вставные нижние листы

Нижние листы могут быть вставлены, уменьшая максимальную ширину до 70%. Это свойство может быть дополнительно уменьшено вручную с помощью width. Мы также демонстрируем привязку динамического класса с использованием объекта точки останова Vuetify.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore