Sheet

The v-sheet is designed to power other paper components within Vuetify. It is meant to be used as a low level component.

Usage

The v-sheet component is a malleable piece of paper that can be morphed to facilitate other components. In this example we utilize custom color, theme (dark/light) and size.

API

props
slots
v-sheet
Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
elevation
Default
undefined
Type
number | string

Designates an elevation between 0 and 24

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max-height
Default
undefined
Type
number | string

Sets the maximum height for the content

Name
max-width
Default
undefined
Type
number | string

Sets the maximum width for the content

Name
min-height
Default
undefined
Type
number | string

Components.Sheets.

Name
min-width
Default
undefined
Type
number | string

Components.Sheets.

Name
tag
Default
div
Type
String

Specifies a tag

Name
tile
Default
false
Type
Boolean

Removes the component's border-radius

Name
width
Default
undefined
Type
number | string

The width of the content

Examples

Using elevation

Sheets can accept a custom elevation between 0 and 24 (0 is default).

Edit this page | language on Github
 — Contribution Guide
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore