mirror of
https://github.com/directus/directus.git
synced 2026-02-15 23:05:02 -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>
50 lines
3.6 KiB
Markdown
50 lines
3.6 KiB
Markdown
# List Item
|
|
|
|
Used inside a `v-list` to display an item inside the given list.
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | -------------------------------------------------- | ----------- | -------------------- |
|
|
| `value` | What value to represent when active | `undefined` | `[String, Number]` |
|
|
| `large` | If the item should be displayed larger | `false` | `Boolean` |
|
|
| `dense` | Makes the item smaller | `false` | `Boolean` |
|
|
| `to` | Where the item should link to | `null` | `string or Location` |
|
|
| `href` | Same as `to` except that it takes an external link | `null` | `String` |
|
|
| `disabled` | Disables the item | `false` | `Boolean` |
|
|
| `active` | If the item should be active or not | `false` | `Boolean` |
|
|
| `dashed` | Adds a dashed style | `false` | `Boolean` |
|
|
| `exact` | | `false` | `Boolean` |
|
|
| `download` | | `null` | `String` |
|
|
|
|
#
|
|
|
|
### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| --------------------------------------- | --------------------------------------------------------------------- |
|
|
| `--v-list-item-min-height-large` | `40px` |
|
|
| `--v-list-item-min-height` | `var(--v-list-item-min-height)` |
|
|
| `--v-list-item-padding-large` | `0 8px` |
|
|
| `--v-list-item-padding` | `0 8px 0 calc(8px + var(--v-list-item-indent, 0px))` |
|
|
| `--v-list-item-margin-large` | `4px 0` |
|
|
| `--v-list-item-margin` | `2px 0` |
|
|
| `--v-list-item-min-width` | `none` |
|
|
| `--v-list-item-max-width` | `none` |
|
|
| `--v-list-item-max-height` | `auto` |
|
|
| `--v-list-item-border-radius` | `var(--border-radius)` |
|
|
| `--v-list-item-margin-bottom` | `0` |
|
|
| `--v-list-item-color` | `var(--v-list-color, var(--foreground-normal))` |
|
|
| `--v-list-item-color-hover` | `var(--v-list-color-hover, var(--foreground-normal))` |
|
|
| `--v-list-item-color-active` | `var(--v-list-color-active, var(--foreground-normal))` |
|
|
| `--v-list-item-background-color-hover` | `var(--v-list-background-color-hover, var(--background-normal-alt))` |
|
|
| `--v-list-item-background-color-active` | `var(--v-list-background-color-active, var(--background-normal-alt))` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | --------------------------- | ---- |
|
|
| _default_ | Where the item content goes | |
|