The bottom sheet is a modified v-dialog
that slides from the bottom of the screen, similar to a v-bottom-navigation
. Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet can contain anything.
Wählen Sie unten Ihren gewünschte Komponente aus und sehen Sie die verfügbaren Attribute, Slots, Ereignisse und Funktionen.
Unten finden Sie eine Sammlung einfacher bis komplexer Beispiele.
Persistent bottom sheets can't be closed by clicking outside them.
Bottom sheets can be controlled using v-model
. You can use it to close them or if you can't use activator
slot.
Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width
prop.
Using a inset bottom sheet, you can make practical components such as this simple music player.
By combining a functional list into a bottom sheet, you can create a simple 'open in' component.