You are viewing the documentation for Vuetify 3
Go to Vuetify 2

Bottom sheets

The bottom sheet is a modified v-dialog that slides from the bottom of the screen, similar to a v-bottom-navigation.

Usage

Whereas a bottom navigation component is for buttons and specific application level actions, a bottom sheet is meant to contain anything.

API

ComponentDescription
v-bottom-sheetPrimary Component

Anatomy

The recommended components to use inside of a v-bottom-sheet are:

Element / AreaDescription
1. ContainerThe bottom sheet is a dialog that animates from the bottom of the screen

Guide

The v-bottom-sheet component is a modified v-dialogthat slides from the bottom of the screen. It is used for elevating content above other elements in a dialog style fashion. The bottom sheet can be controlled using the v-model prop or through the activator slot.

The following code snippet is an example of a basic v-bottom-sheet component:

<v-bottom-sheet>
  <v-card
    title="Bottom Sheet"
    text="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut, eos? Nulla aspernatur odio rem, culpa voluptatibus eius debitis."
  ></v-card>
</v-bottom-sheet>

Props

The v-bottom-sheet component has access to all of the props available in v-dialog.

Model

The v-model (or model-value) controls the visibility of the bottom sheet:

This also works in tandem with the activatorslot.

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.

Slots

The v-bottom-sheet component has access to all of the slots available in v-dialog.

SlotDescription
1. DefaultThe default slot
2. ActivatorThe activator slot is used to open the bottom sheet

Examples

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.

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 onGitHub