按钮组
按钮组将相关选项以视觉方式组合在一起，同时支持单选或多选。
示例
默认
类型
尺寸
变体
禁用
多项展开 Selection
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<SelectionGroup> | root | [data-scope="button-group"][data-part="root"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
disabled可选 | - boolean | undefined | false | |
selectionMode可选 | - singlemultiple | "single" | |
name可选 | - string | undefined | - | - |
ariaLabel可选 | - string | undefined | - | - |
shape可选 | - M3Shape | undefined | - | - |
type可选 | - standardconnected | "standard" | |
size可选 | - smalllargeextra-smallmediumextra-large | "small" | |
variant可选 | - ButtonVariant | undefined | "tonal" | - |
pressShapeMorph可选 | - boolean | undefined | undefined | |
modelValue可选 | - SelectionGroupModelValue | - | - |
事件1
| 名称 | 类型 | 说明 |
|---|---|---|
update:modelValue | [value: SelectionGroupModelValue] | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | - |
样式61
| Token | 说明 |
|---|---|
--md-button-group-between-spaceLayout回退值 var(--md-button-group-standard-medium-between-space,0.5rem) | Controls between space. |
--md-button-group-connected-container-shapeShape回退值 var(--md-button-group-connected-medium-container-shape,var(--md-shape-action)) | Controls connected container shape. |
--md-button-group-connected-inner-corner-corner-sizeShape回退值 var(--md-button-group-connected-medium-inner-corner-corner-size,var(--md-sys-shape-corner-value-small)) | Controls connected inner corner corner size. |
--md-button-group-connected-large-between-spaceLayout回退值 0.125rem | Controls connected large between space. |
--md-button-group-connected-large-container-heightLayout回退值 6rem | Controls connected large container height. |
--md-button-group-connected-large-container-shapeShape回退值 var(--md-shape-action) | Controls connected large container shape. |
--md-button-group-connected-large-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-large) | Controls connected large inner corner corner size. |
--md-button-group-connected-large-pressed-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-medium) | Controls connected large pressed inner corner corner size. |
--md-button-group-connected-large-selected-inner-corner-corner-sizeShape回退值 var(--md-shape-action) | Controls connected large selected inner corner corner size. |
--md-button-group-connected-medium-between-spaceLayout回退值 0.125rem | Controls connected medium between space. |
--md-button-group-connected-medium-container-heightLayout回退值 3.5rem | Controls connected medium container height. |
--md-button-group-connected-medium-container-shapeShape回退值 var(--md-shape-action) | Controls connected medium container shape. |
--md-button-group-connected-medium-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-small) | Controls connected medium inner corner corner size. |
--md-button-group-connected-medium-pressed-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-extra-small) | Controls connected medium pressed inner corner corner size. |
--md-button-group-connected-medium-selected-inner-corner-corner-sizeShape回退值 var(--md-shape-action) | Controls connected medium selected inner corner corner size. |
--md-button-group-connected-pressed-inner-corner-corner-sizeShape回退值 var(--md-button-group-connected-medium-pressed-inner-corner-corner-size,var(--md-sys-shape-corner-value-extra-small)) | Controls connected pressed inner corner corner size. |
--md-button-group-connected-selected-inner-corner-corner-sizeShape回退值 var(--md-button-group-connected-medium-selected-inner-corner-corner-size,var(--md-shape-action)) | Controls connected selected inner corner corner size. |
--md-button-group-connected-small-between-spaceLayout回退值 0.125rem | Controls connected small between space. |
--md-button-group-connected-small-container-heightLayout回退值 2.5rem | Controls connected small container height. |
--md-button-group-connected-small-container-shapeShape回退值 var(--md-shape-action) | Controls connected small container shape. |
--md-button-group-connected-small-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-small) | Controls connected small inner corner corner size. |
--md-button-group-connected-small-pressed-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-extra-small) | Controls connected small pressed inner corner corner size. |
--md-button-group-connected-small-selected-inner-corner-corner-sizeShape回退值 var(--md-shape-action) | Controls connected small selected inner corner corner size. |
--md-button-group-connected-xlarge-between-spaceLayout回退值 0.125rem | Controls connected xlarge between space. |
--md-button-group-connected-xlarge-container-heightLayout回退值 8.5rem | Controls connected xlarge container height. |
--md-button-group-connected-xlarge-container-shapeShape回退值 var(--md-shape-action) | Controls connected xlarge container shape. |
--md-button-group-connected-xlarge-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-large-increased) | Controls connected xlarge inner corner corner size. |
--md-button-group-connected-xlarge-pressed-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-large) | Controls connected xlarge pressed inner corner corner size. |
--md-button-group-connected-xlarge-selected-inner-corner-corner-sizeShape回退值 var(--md-shape-action) | Controls connected xlarge selected inner corner corner size. |
--md-button-group-connected-xsmall-between-spaceLayout回退值 0.125rem | Controls connected xsmall between space. |
--md-button-group-connected-xsmall-container-heightLayout回退值 2rem | Controls connected xsmall container height. |
--md-button-group-connected-xsmall-container-shapeShape回退值 var(--md-shape-action) | Controls connected xsmall container shape. |
--md-button-group-connected-xsmall-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-small) | Controls connected xsmall inner corner corner size. |
--md-button-group-connected-xsmall-pressed-inner-corner-corner-sizeShape回退值 var(--md-sys-shape-corner-value-extra-small) | Controls connected xsmall pressed inner corner corner size. |
--md-button-group-connected-xsmall-selected-inner-corner-corner-sizeShape回退值 var(--md-shape-action) | Controls connected xsmall selected inner corner corner size. |
--md-button-group-heightLayout回退值 initial | Controls height. |
--md-button-group-standard-large-between-spaceLayout回退值 0.5rem | Controls standard large between space. |
--md-button-group-standard-large-container-heightLayout回退值 6rem | Controls standard large container height. |
--md-button-group-standard-large-pressed-item-width-motion-spring-dampeningMotion回退值 var(--md-sys-motion-spring-fast-spatial-damping) | Controls standard large pressed item width motion spring dampening. |
--md-button-group-standard-large-pressed-item-width-motion-spring-stiffnessMotion回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls standard large pressed item width motion spring stiffness. |
--md-button-group-standard-large-pressed-item-width-multiplierState回退值 15% | Controls standard large pressed item width multiplier. |
--md-button-group-standard-medium-between-spaceLayout回退值 0.5rem | Controls standard medium between space. |
--md-button-group-standard-medium-container-heightLayout回退值 3.5rem | Controls standard medium container height. |
--md-button-group-standard-medium-pressed-item-width-motion-spring-dampeningMotion回退值 var(--md-sys-motion-spring-fast-spatial-damping) | Controls standard medium pressed item width motion spring dampening. |
--md-button-group-standard-medium-pressed-item-width-motion-spring-stiffnessMotion回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls standard medium pressed item width motion spring stiffness. |
--md-button-group-standard-medium-pressed-item-width-multiplierState回退值 15% | Controls standard medium pressed item width multiplier. |
--md-button-group-standard-small-between-spaceLayout回退值 0.75rem | Controls standard small between space. |
--md-button-group-standard-small-container-heightLayout回退值 2.5rem | Controls standard small container height. |
--md-button-group-standard-small-pressed-item-width-motion-spring-dampeningMotion回退值 var(--md-sys-motion-spring-fast-spatial-damping) | Controls standard small pressed item width motion spring dampening. |
--md-button-group-standard-small-pressed-item-width-motion-spring-stiffnessMotion回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls standard small pressed item width motion spring stiffness. |
--md-button-group-standard-small-pressed-item-width-multiplierState回退值 15% | Controls standard small pressed item width multiplier. |
--md-button-group-standard-xlarge-between-spaceLayout回退值 0.5rem | Controls standard xlarge between space. |
--md-button-group-standard-xlarge-container-heightLayout回退值 8.5rem | Controls standard xlarge container height. |
--md-button-group-standard-xlarge-pressed-item-width-motion-spring-dampeningMotion回退值 var(--md-sys-motion-spring-fast-spatial-damping) | Controls standard xlarge pressed item width motion spring dampening. |
--md-button-group-standard-xlarge-pressed-item-width-motion-spring-stiffnessMotion回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls standard xlarge pressed item width motion spring stiffness. |
--md-button-group-standard-xlarge-pressed-item-width-multiplierState回退值 15% | Controls standard xlarge pressed item width multiplier. |
--md-button-group-standard-xsmall-between-spaceLayout回退值 1.125rem | Controls standard xsmall between space. |
--md-button-group-standard-xsmall-container-heightLayout回退值 2rem | Controls standard xsmall container height. |
--md-button-group-standard-xsmall-pressed-item-width-motion-spring-dampeningMotion回退值 var(--md-sys-motion-spring-fast-spatial-damping) | Controls standard xsmall pressed item width motion spring dampening. |
--md-button-group-standard-xsmall-pressed-item-width-motion-spring-stiffnessMotion回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls standard xsmall pressed item width motion spring stiffness. |
--md-button-group-standard-xsmall-pressed-item-width-multiplierState回退值 15% | Controls standard xsmall pressed item width multiplier. |
ButtonGroupItem
属性
| 名称 | 说明 | 默认值 |
|---|---|---|
value必填 | - SelectionGroupValue | - |
disabled可选 | - boolean | undefined | false |
ariaLabel可选 | - string | undefined | - |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | - |