v-sheet component is a transformable piece of paper that provides a basic foundation for Vuetify features.
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.
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.
Some of the standard props that can be applied to the
v-sheet component are listed below.
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.
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.
Sheets and components based on them can have different sizes and colors.
v-sheet component accepts custom Material Design Color values such as
amber darken-3, and
deep-purple accent — as well as rgb, rgba, and hexadecimal values.
The following are a collection of examples that demonstrate more advanced and real world use of the
This example uses a sheet component to create a banner congratulating users for signing up for the Vuetify community.
The following example uses a sheet component to create a banner that notifies users that the account balance has been reconciled.
Even for simple use-cases, the
v-sheet component is versatile makes it easy to contain content and other components.