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.
Here we display an example list of actions that could be present in an application.
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
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation
Default Vue slot
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.