Sheets

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

Basic

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.

Elevation

The v-sheet component accepts a custom elevation between 0 and 24 (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

Congratulations

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

Congratulations!

You are officially a part of the DashUi Community!

Please head over to your inbox/spam or others folder to find our verificaiton 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 collectied 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.

CONTENTS
  • Introduction

  • Basic

  • Elevation

  • Rounded

  • Congratulations

  • Reconcile Notification

  • Privacy Policy

  • Referral Program