mirror of
https://github.com/directus/directus.git
synced 2026-01-30 18:58:08 -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>
78 lines
2.0 KiB
Markdown
78 lines
2.0 KiB
Markdown
# Card
|
|
|
|
A card is nothing but a v-sheet with predefined building blocks to enforce consistency.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<v-card>
|
|
<v-card-title>Hello, world!</v-card-title>
|
|
<v-card-subtitle>This is a card</v-card-subtitle>
|
|
<v-card-text>Consectetur enim ullamco sint sit deserunt proident consectetur.</v-card-text>
|
|
<v-card-actions>
|
|
<v-button>Save</v-button>
|
|
</v-card-actions>
|
|
</v-card>
|
|
```
|
|
|
|
Cards can be used to consistently style dialogs:
|
|
|
|
```html
|
|
<v-dialog>
|
|
<template #activator="{ on }">
|
|
<v-button @click="on">Show dialog</v-button>
|
|
</template>
|
|
|
|
<v-card>
|
|
<v-card-title>Are you sure you want to delete 1 item?</v-card-title>
|
|
<v-card-actions>
|
|
<v-button secondary outlined>Cancel</v-button>
|
|
<v-button>Yes</v-button>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | ------------------------------------------------- | ------- | --------- |
|
|
| `disabled` | Disable the card, prevents all cursor interaction | `false` | `Boolean` |
|
|
| `tile` | Render without rounded corners | `false` | `Boolean` |
|
|
|
|
#### Events
|
|
|
|
n/a
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ----------- | ---- |
|
|
| _default_ | | |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| --------------------------- | --------------------------- |
|
|
| `--v-card-min-width` | `none` |
|
|
| `--v-card-max-width` | `400px` |
|
|
| `--v-card-min-height` | `none` |
|
|
| `--v-card-max-height` | `min-content` |
|
|
| `--v-card-padding` | `16px` |
|
|
| `--v-card-background-color` | `var(--background-subdued)` |
|
|
| `--v-card-height` | `auto` |
|
|
|
|
---
|
|
|
|
# Card Title
|
|
|
|
Functional component that enforces consistent styling.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<v-card-title>Hello, world!</v-card-title>
|
|
```
|