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.
<v-sheet :height="200" :width="200"></v-sheet>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 5 (0 is default). The elevation property modifies the box-shadow property.
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.
Congratulations!
Please head over to your inbox/spam or others folder to find our verification email.
Reconcile Notification
The following example uses a sheet component to create a banner that notifies users that the account balance has been reconciled.
You reconciled this account
To see a report on this reconciliation, click View reconciliation report.
Otherwise, you're done!
Privacy Policy
Creating a Privacy Policy notification is a great use case for the v-sheet component.
Your Privacy
This business determines the use of personal data collected on our media properties and across the internet. We may collect data that you submit to us directly or data that we collect automatically including from cookies (such as device information or IP address).
Please read our Privacy Policy to learn about our privacy practices or click "Your Preferences" to exercise control over your data.
Referral program
Even for simple use-cases, the v-sheet component is versatile makes it easy to contain content and other components.
This is part of our Most Comprehensive Guide to Referral Programs > Do I Need A Referral Program? section. You may enjoy other related articles: