跳转到内容
编辑此页面

Button groups 按钮组组件

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

Basic button group 基本的按钮组

The buttons can be grouped by wrapping them with the ButtonGroup component. They need to be immediate children. 它们必须是直接的子组件。 They need to be immediate children.

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

Button variants

All the standard button variants are supported.

<ButtonGroup variant="outlined" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text" aria-label="text 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 分体式按钮

按钮组组件也可用于创建分体式按钮。 下拉列表可以改变其按钮 action（如此例所示），或者被用于立即触发一个与下拉列表相关的 action。

Disabled elevation 禁用立体效果（elevation）

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

<ButtonGroup
  disableElevation
  variant="contained"
  aria-label="Disabled elevation buttons"
>
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API