mirror of
https://github.com/directus/directus.git
synced 2026-01-31 00:48:16 -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>
48 lines
1.3 KiB
Markdown
48 lines
1.3 KiB
Markdown
# 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.
|
|
|
|
```html
|
|
<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`.
|
|
|
|
```html
|
|
<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_ | | |
|