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