mirror of
https://github.com/directus/directus.git
synced 2026-02-03 10:54:55 -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>
57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# Button Group
|
|
|
|
Provides the ability to make groups of buttons. Uses the v-item-group component and adds styling to the buttons. For
|
|
more information about how to use groups, look into v-item-group.
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<template>
|
|
<v-button-group v-model="selection">
|
|
<v-button v-slot:default="{ active }">Click me to {{ active ? 'activate' : 'deactivate' }}</v-button>
|
|
</v-button-group>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from '@vue/composition-api';
|
|
|
|
export default defineComponent({
|
|
setup() {
|
|
const selection = ref([]);
|
|
return { selection };
|
|
},
|
|
});
|
|
</script>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ----------- | ------------------------------------------------------- | ----------- | ---------------------- |
|
|
| `mandatory` | Require an item to be selected | `false` | `Boolean` |
|
|
| `max` | Only allow a maximum of n items | `-1` | `Number` |
|
|
| `multiple` | Allow multiple items to be selected | `false` | `Boolean` |
|
|
| `value` | The v-model value. Selection of indexes / custom values | `undefined` | `(string or number)[]` |
|
|
| `rounded` | Adds rounded corners to the sides | `false` | `Boolean` |
|
|
| `tile` | Adds sharp corners to the sides | `false` | `Boolean` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ----------- | ---- |
|
|
| _default_ | | -- |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| ------- | -------------------------------- | ---------------------- |
|
|
| `input` | Used to update the v-model value | `(string or number)[]` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ------------------------------------------ | -------------------- |
|
|
| `--v-button-group-background-color-active` | `var(--primary-alt)` |
|