mirror of
https://github.com/directus/directus.git
synced 2026-01-23 07:47:58 -05:00
c2e7c85bbd
* move component docs to documentation * update app docs tables for components * update docs * Add components to docs sidebar * fix generated tables * fix tables * rename transitions * update tables * update nested components * update tables * update tables * update tables * update v-table table * add basic documentation to each component * remove all stories of storybook * add missing documentation * undate tables * update tables * update docs sidebar * update app docs * remove unused references * add general readme * update docs * make reference titiles smaller * add reference tag * improve docs * update order of tabs in sidebar * remove all readmes and stories from interfaces/displays * Cleanup menu * Remove storybook Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
1.3 KiB
1.3 KiB
Sheet
A sheet is a component that holds other components. It provides a visual difference (layer) on the page. It's often used when grouping fields.
<v-sheet></v-sheet>
Sizing
The sheet component has props for height, width, min-height, min-width, max-height, and max-width. All of
these props are in pixels.
Color
The color can be changed via the css variable called --v-sheet-color.
<v-sheet />
<style>
.v-sheet {
--v-sheet-color: var(-red-600);
}
</style>
Reference
CSS Variables
| Variable | Default |
|---|---|
--v-sheet-background-color |
var(--background-subdued) |
--v-sheet-height |
auto |
--v-sheet-min-height |
var(--input-height) |
--v-sheet-max-height |
none |
--v-sheet-width |
auto |
--v-sheet-min-width |
none |
--v-sheet-max-width |
none |
--v-sheet-padding |
8px |
Slots
| Slot | Description | Data |
|---|---|---|
| default |