Bottom sheet

El bottom sheet es un v-dialog modificado que aparece desde la parte baja de la pantalla, similar a un v-bottom-nav. Mientras que un componente bottom navigation es para los botones y acciones específicas al nivel de la aplicación, un bottom sheet puede contener cualquier cosa.

Uso

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

API

v-bottom-sheet
Nombre
disabled
Default
false
Type
boolean

Deshabilita abrir el díalogo

Nombre
full-width
Default
false
Type
boolean

Obliga a un ancho de 100%

Nombre
hide-overlay
Default
false
Type
boolean

Components.BottomSheets.

Nombre
inset
Default
false
Type
boolean

Reduce el ancho máximo del contenido del diálogo a 70%

Nombre
lazy
Default
false
Type
boolean

Renderiza el contenido condicionalmente en el lifecycle hook mounted. Sólo renderizará el contenido si es activado.

Nombre
max-width
Default
auto
Type
string | number

Especifica el ancho máximo del contenedor del bottom sheet.

Nombre
persistent
Default
false
Type
boolean

El diálogo no se irá al hacer click afuera del mismo

Nombre
value
Default
undefined
Type
any

Controla la visibilidad

Ejemplos

Inset bottom sheets

Los bottom sheets pueden quedar "por dentro", lo que reduce su ancho máximo al 70% en resolución de escritorio. Esto puede ser reducido aún más manualmente utilizando la prop width. También mostramos binding de clases dinámicas utilizando el objeto breakpoint de 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