Bottom sheet
The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-navigation.
Basic
Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet is meant to contain anything.
Model
The v-model (or model-value) controls the visibility of the bottom sheet:
Inset
With the inset prop, reduce the maximum width of the content area on desktop to 70%. This can be further reduced manually using the width prop.
Example
The following are a collection of examples that demonstrate more advanced and real world use of the v-bottom-sheet component.
Music Player
Using a inset bottom sheet, you can make practical components such as this simple music player.
Open In List
By combining a functional list into a bottom sheet, you can create a simple ‘open in’ component.
CONTENTS
Introduction
Basic
Model
Inset
Example