docs_vue2/one/docs/en-US/components/radio-group.md

87 lines
1.8 KiB
Markdown
Raw Normal View History

2020-08-13 11:47:56 +08:00
# RadioGroup
## Demos
### Sizes
Available size variant for the [`ui`](#props-ui) prop: `s` / `m`.
2020-08-13 11:47:56 +08:00
[[ demo src="/demo/radio-group/default.vue" ]]
## API
### Props
| Name | Type | Default | Description |
| -- | -- | -- | -- |
| ``ui`` | `string=` | - | [^ui] |
| ``items`` | `Array<Object>` | `[]` | [^items] |
| ``value`` | `*` | - | [^value] |
| ``disabled`` | `boolean=` | `false` | Whether the radio group is disabled. |
| ``readonly`` | `boolean=` | `false` | Whether the radio group is read-only. |
2020-08-13 11:47:56 +08:00
^^^ui
Style variants.
+++Enum values
| Value | Description |
| -- | -- |
| `s` | Small. |
| `m` | Medium. |
^^^
^^^items
The datasource of items with the item type being `{label, value, disabled, ...}`.
+++Properties
| Name | Type | Description |
| -- | -- | -- |
| `label` | `string` | The descriptive label of the item. |
| `value` | `*` | The value of the item. |
| `disabled` | `boolean=` | Whether the item is disabled. |
+++
^^^
^^^value
:::badges
`v-model`
:::
The `value` of the selected item.
^^^
### Slots
| Name | Description |
| -- | -- |
| ``item`` | [^slot-item] |
2020-08-13 11:47:56 +08:00
^^^slot-item
The label content of each radio. Displays the value of the `label` property by default.
2020-08-13 11:47:56 +08:00
2022-01-24 18:53:52 +08:00
+++Slot props
2020-08-13 11:47:56 +08:00
| Name | Type | Description |
| -- | -- | -- |
| `label` | `string` | The descriptive label of the item. |
| `value` | `*` | The value of the item. |
| `index` | `number` | The index of the item within `items`. |
| `disabled` | `boolean=` | Whether the item is disabled. |
+++
2022-01-24 18:53:52 +08:00
Additionally, custom properties apart from the listed ones will also be passes into the slot props object via `v-bind`.
2020-08-13 11:47:56 +08:00
^^^
### Events
| Name | Description |
| -- | -- |
| ``change`` | [^event-change] |
2020-08-13 11:47:56 +08:00
^^^event-change
:::badges
`v-model`
:::
Triggers when the selected item changed. The callback parameter list is `(value: *)` and `value` is the value of the selected item.
^^^