Bottom sheet
The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-nav. Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet can contain anything.
API
Disables the ability to open the dialog
Forces 100% width
Hide the display of the overlay
Reduces the dialog content maximum width to 70%
Conditionally renders content on mounted. Will only render content if activated
Specify the maximum width of the sheet's container
Clicking outside will not dismiss the dialog
Controls visibility
Examples
Inset bottom sheets
Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width prop. We also showcase dynamic class binding using the Vuetify breakpoint object.