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>

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

Press Enter to start editing

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>

<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>

Press Enter to start editing

大小和颜色

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>

<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>

Press Enter to start editing

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>

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

Press Enter to start editing

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.