2.7 KiB
ButtonGroup
Demos
Stylistic variants
Available style variants for the ui prop: primary / strong / basic.
Size variants
Available size variants for the ui prop: xs / s / m / l / xl.
Using datasource
Use the items prop to provide content with a datasource.
Disabled state
Use the disabled prop to set the button group to disabled state.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
ui |
string= |
- | [^ui] |
items |
Array<Object> |
- | [^items] |
disabled |
boolean= |
false |
Whether the button is disabled. |
^^^ui Style variants. A space-separated list of enum values.
+++Enum values
| Value | Description |
|---|---|
primary |
Primary buttons. |
strong |
Strong buttons. |
basic |
Basic buttons. |
xs |
Extra small. |
s |
Small. |
m |
Medium. |
l |
Large. |
xl |
Extra large. |
| +++ | |
| ^^^ |
^^^items
The datasource array for buttons in the group. The type of each item is {label, value}.
+++Properties
| Name | Type | Description |
|---|---|---|
label |
string |
The label text of the button. |
value |
*= |
Will emit an event with the same name when given a string value. |
| +++ | ||
| ^^^ |
Slots
| Name | Description |
|---|---|
default |
Button group's content. |
item |
[^slot-item] |
^^^slot-item The content of each button.
Shows the text specified by the label property by default.
+++Slot props
| Name | Type | Description |
|---|---|---|
label |
string |
The label text of the button. |
value |
*= |
The value of button item. |
index |
number |
The index of the button within items. |
disabled |
boolean= |
Whether the button is disabled. |
| +++ |
Additionally, custom properties apart from the listed ones will also be passes into the slot props object via v-bind.
^^^
Events
| Name | Description |
|---|---|
click |
[^click-event] |
| <value> | [^value-var-event] |
^^^click-event
Triggered upon clicks. The callback parameter list is (item, index).
+++Parameters
| Name | Type | Description |
|---|---|---|
item |
{label: string, value: *=, ...} |
Datasource item. |
index |
number |
The index of the button within items. |
| +++ | ||
| ^^^ |
^^^value-var-event
If the corresponding item has a string value property, an event with the name of value value will be emitted each time the button is clicked. It shares the same parameters with the click event.
^^^