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
| Component | Description |
|---|---|
| v-sheet | Primary Component |
Anatomy
The v-sheet component contains only a default slot.
| Element / Area | Description |
|---|---|
| 1. Container | The 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 Radius page.
Color
Sheets and components based on them can have different sizes and colors.
The v-sheet component accepts custom Material Design Color values 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.