跳转到内容
编辑此页面

Button groups 按钮组组件

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

Basic button group 基本的按钮组

The buttons can be grouped by wrapping them with the ButtonGroup component. 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">
  <Button>One</Button>
  <Button>Two</Button>
</ButtonGroup>

API