mirror of
https://github.com/directus/directus.git
synced 2026-01-30 13:17:57 -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>
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
# Switch
|
|
|
|
Render a switch that either can model a single boolean value or model an array in combination with the `value` prop.
|
|
|
|
```html
|
|
<v-switch v-model="checked" label="Receive newsletter" />
|
|
```
|
|
|
|
## Colors
|
|
|
|
Color changes are done using the css variable `--v-switch-color`.
|
|
|
|
```html
|
|
<v-switch v-model="checked" />
|
|
<style>
|
|
.v-switch {
|
|
--v-switch-color: var(--red);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Boolean vs arrays
|
|
|
|
Just as with regular checkboxes, you can use `v-model` with both an array and a boolean:
|
|
|
|
```html
|
|
<template>
|
|
<v-switch v-model="withBoolean" />
|
|
|
|
<v-switch v-model="withArray" value="red" />
|
|
<v-switch v-model="withArray" value="blue" />
|
|
<v-switch v-model="withArray" value="green" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
withBoolean: false,
|
|
withArray: ['red', 'green'],
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
```
|
|
|
|
Keep in mind to pass the `value` prop with a unique value when using arrays in `v-model`.
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ------------- | ------------------------------------------------------ | ------- | ------------------ |
|
|
| `value` | If modeling an array, what value the switch represents | `null` | `String` |
|
|
| `input-value` | Model the selected state using `v-model` | `false` | `[Boolean, Array]` |
|
|
| `disabled` | Disables the switch | `false` | `Boolean` |
|
|
| `label` | Displays a label next to the switch | `null` | `String` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ------------------ | -------------------------- |
|
|
| `--v-switch-color` | `var(--foreground-normal)` |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| -------- | ------------------------------------ | ----- |
|
|
| `change` | When the state of the switch changes | |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| ------- | ----------------------------------------------- | ---- |
|
|
| `label` | Alternative way of adding a label to the switch | |
|