跳转到内容
编辑此页面

Button groups 按钮组组件

按钮组组件可用于对相关按钮进行分组。

Basic button group 基本的按钮组

支持基本的按钮变量。

<ButtonGroup variant="contained" aria-label="outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

大小和颜色

size 和 color 属性可以用于控制按钮组的外观。

<ButtonGroup size="small" aria-label="small button group">
  {buttons}
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="medium secondary button group">
  {buttons}
</ButtonGroup>
<ButtonGroup size="large" aria-label="large button group">
  {buttons}
</ButtonGroup>

Vertical group 垂直组

按钮组可以使用 orientation 属性来垂直显示。

Split button 分体式按钮

按钮组组件也可用于创建分体式按钮。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即触发一个相关的操作。

Disabled elevation 禁用立体效果（elevation）

你也可以使用属性 disableElevation 属性来消除实心按钮的立体效果。

<ButtonGroup disableElevation variant="contained">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API