Sheets

The v-sheet component is a transformable piece of paper that provides a basic foundation for Vuetify features.

Usage

The sheet component has support for elevation, rounded corners, color, and more. It can be used as a container for other components or as a standalone.


API

ComponentDescription
v-sheetPrimary Component

Anatomy

The v-sheet component contains only a default slot.

Element / AreaDescription
1. ContainerThe main content area

Guide

Often when building out a user interface, you will need to create a container for content and other custom components. The v-sheet component is a great way to do this. It provides a baseline for elevation, rounded corners, and color.

Props

Some of the standard props that can be applied to the v-sheet component are listed below.

Elevation

The v-sheet component accepts a custom elevation between 0 and 24 (0 is default). The elevation property modifies the box-shadow property. More information is located in the MD Elevation Design Specification.

Rounded

The rounded prop adds a default border-radius of 4px. By default, the v-sheet component has no border-radius. Customize the radius’s size and location by providing a custom rounded value; e.g. a rounded value of tr-xl l-pill equates to rounded-tr-xl rounded-l-pill. Additional information is on the Border Radiuspage.

Color

Sheets and components based on them can have different sizes and colors.

The v-sheet component accepts custom Material Design Colorvalues such as warning, amber darken-3, and deep-purple accent — as well as rgb, rgba, and hexadecimal values.

Examples

The following are a collection of examples that demonstrate more advanced and real world use of the v-sheet component.

Congratulations

This example uses a sheet component to create a banner congratulating users for signing up for the Vuetify community.

Reconcile Notification

The following example uses a sheet component to create a banner that notifies users that the account balance has been reconciled.

Privacy Policy

Creating a Privacy Policy notification is a great use case for the v-sheet component.

Referral program

Even for simple use-cases, the v-sheet component is versatile makes it easy to contain content and other components.

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