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.
API
Deshabilita abrir el díalogo
Obliga a un ancho de 100%
Components.BottomSheets.
Reduce el ancho máximo del contenido del diálogo a 70%
Renderiza el contenido condicionalmente en el lifecycle hook mounted. Sólo renderizará el contenido si es activado.
Especifica el ancho máximo del contenedor del bottom sheet.
El diálogo no se irá al hacer click afuera del mismo
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.