跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post →

编辑此页面

Button groups 按钮组组件

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

Basic button group 基本的按钮组

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

大小和颜色

<ButtonGroup size="small" aria-label="small outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="secondary" aria-label="outlined secondary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="large" color="primary" aria-label="large outlined primary button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

Vertical group 垂直组

Split button 分体式按钮

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

Disabled elevation 禁用立体效果（elevation）

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

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

API