mirror of
https://github.com/directus/directus.git
synced 2026-02-19 10:14:33 -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>
68 lines
2.1 KiB
Markdown
68 lines
2.1 KiB
Markdown
# Fancy Select
|
|
|
|
Mimics the functionality of a select, where only the current value is shown, but does it in a different visual
|
|
representation.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<v-fancy-select
|
|
v-model="selection"
|
|
:items="[
|
|
{
|
|
value: 'code',
|
|
icon: 'code',
|
|
text: 'Raw Value',
|
|
description: 'This works for most non-relational fields',
|
|
},
|
|
{
|
|
value: 'palette',
|
|
icon: 'palette',
|
|
text: 'Formatted Value',
|
|
description: 'Templated formatting and conditional coloring to text values',
|
|
},
|
|
{
|
|
value: 'label',
|
|
icon: 'label',
|
|
text: 'Placard',
|
|
description: 'Shows the value within a colored badge',
|
|
},
|
|
]"
|
|
/>
|
|
```
|
|
|
|
## FancySelectItem
|
|
|
|
| Prop | Description | Type |
|
|
| ------------- | ------------------------------------------ | ---------------------------------------- |
|
|
| `icon` | Which icon to display | `string` |
|
|
| `value` | Which value the item represents | `string or number` |
|
|
| `text` | The displayed text | `undefined or string or TranslateResult` |
|
|
| `description` | Optional description to display | `undefined or string or TranslateResult` |
|
|
| `divider` | If set to true, display an divider instead | `undefined or boolean` |
|
|
| `iconRight` | Display an optional icon to the right | `undefined or string` |
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | --------------------------------------- | ------- | ------------------- |
|
|
| `items`\* | The list of possible items to display | | `FancySelectItem[]` |
|
|
| `value` | used to model the selected items | `null` | `[String, Number]` |
|
|
| `disabled` | Disable selecting / deselecting a value | `false` | `Boolean` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| ------- | -------------------------- | --------- |
|
|
| `input` | Syncs value with `v-model` | `boolean` |
|
|
|
|
#### Slots
|
|
|
|
n/a
|
|
|
|
#### CSS Variables
|
|
|
|
n/a
|