# Bottom sheets

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.

# Usage

Here we display an example list of actions that could be present in an application.


# Examples

# Props

# Inset

Bottom sheets can be inset, reducing their maximum width on desktop to 70%. This can be further reduced manually using the width prop.

# Model

Bottom sheets can be controlled using v-model. You can use it to close them or if you can’t use activator slot.

# Persistent

Persistent bottom sheets can’t be closed by clicking outside them.

# Misc

# 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/21/2021, 6:25:20 AM