Skip to main content

​
Usage

The VSheet component is a versatile container that combines multiple composable props for creating styled surfaces. 
<template>
  <v-sheet
    color="primary"
    elevation="4"
    rounded
  >
    Sheet content
  </v-sheet>
</template>

​
Elevation

Control the elevation depth: 
<template>
  <v-sheet elevation="12">
    High elevation sheet
  </v-sheet>
</template>

​
Borders

Add borders to specific sides: 
<template>
  <v-sheet
    border="top bottom"
    border-color="primary"
  >
    Sheet with borders
  </v-sheet>
</template>

​
Rounded Corners

Customize border radius: 
<template>
  <v-sheet rounded="lg">
    Large rounded corners
  </v-sheet>
</template>

​
Positioning

Use position and location props for absolute/fixed positioning: 
<template>
  <v-sheet
    position="fixed"
    location="bottom right"
  >
    Fixed position sheet
  </v-sheet>
</template>

​
Dimensions

Set width and height: 
<template>
  <v-sheet
    width="300"
    height="200"
  >
    Sized sheet
  </v-sheet>
</template>

​
Props

​
color
string
Applies specified color to the background
​
elevation
string | number
Designates an elevation applied to the component (0-24)
​
rounded
string | number | boolean
Designates the border-radius applied to the component. Options: 0, xs, sm, md, lg, xl, pill, circle, shaped
​
border
string | number | boolean
Applies border to the component. Can specify sides: ‘top’, ‘bottom’, ‘left’, ‘right’
​
width
string | number
Sets the width of the component
​
height
string | number
Sets the height of the component
​
maxWidth
string | number
Sets the maximum width of the component
​
maxHeight
string | number
Sets the maximum height of the component
​
minWidth
string | number
Sets the minimum width of the component
​
minHeight
string | number
Sets the minimum height of the component
​
position
'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'
Sets the position CSS property
​
location
string
Specifies the anchor point for positioning. Combines top/bottom with left/right/center
​
theme
string
Specify a theme for this component and all of its children
​
tag
string
default:"div"
Specify a custom tag used on the root element

​
Slots

​
default
slot
The default Vue slot for content
VSheet is a foundational component used internally by many other Vuetify components like VCard, VToolbar, and VNavigationDrawer.

Build docs developers (and LLMs) love

Get started for freeTalk to us