mirror of
https://github.com/directus/directus.git
synced 2026-01-30 22:18:14 -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>
60 lines
2.4 KiB
Markdown
60 lines
2.4 KiB
Markdown
# List
|
|
|
|
Display usual lists. Also works with nested data.
|
|
|
|
```html
|
|
<v-list>
|
|
<v-list-item>Item 1</v-list-item>
|
|
<v-list-item>Item 2</v-list-item>
|
|
<v-list-item>Item 3</v-list-item>
|
|
|
|
<v-list-group>
|
|
<template #activator="{active}">
|
|
<v-list-item>Group 1</v-list-item>
|
|
</template>
|
|
|
|
<v-list-item>Item 1-1</v-list-item>
|
|
<v-list-item>Item 1-2</v-list-item>
|
|
<v-list-item>Item 1-2</v-list-item>
|
|
</v-list-group>
|
|
</v-list>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| -------------- | ----------------------------------------------------------- | ---------- | ---------------------- |
|
|
| `active-items` | Used with `v-model` to model all selected items in the list | `() => []` | `(number or string)[]` |
|
|
| `large` | Displays each list item a bit larger | `false` | `Boolean` |
|
|
| `multiple` | Allows to select multiple items in the list | `true` | `Boolean` |
|
|
| `mandatory` | At least one item has to be selected | `true` | `Boolean` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ---------------------------------- | ------------------------------ |
|
|
| `--v-list-padding` | `4px 0` |
|
|
| `--v-list-max-height` | `none` |
|
|
| `--v-list-max-width` | `none` |
|
|
| `--v-list-min-width` | `220px` |
|
|
| `--v-list-min-height` | `none` |
|
|
| `--v-list-color` | `var(--foreground-normal-alt)` |
|
|
| `--v-list-color-hover` | `var(--foreground-normal-alt)` |
|
|
| `--v-list-color-active` | `var(--foreground-normal-alt)` |
|
|
| `--v-list-background-color-hover` | `var(--background-normal-alt)` |
|
|
| `--v-list-background-color-active` | `var(--background-normal-alt)` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| ------- | ------------------------------------ | ----- |
|
|
| `input` | Used to update the current selection | |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | -------------------------- | ---- |
|
|
| _default_ | Render all list items here | |
|