按钮组

Button Group 组件将一组相关的按钮组合在一起。

简介

Button Group 组件将一组具有相似或相关功能的按钮组合在一起。

<ButtonGroup>
  <Button />
  ...
  <IconButton />
</ButtonGroup>

基础用法

Button Group 组件可以包裹 Button 和 IconButton。

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

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

按 Enter 开始编辑

自定义

变体

Button Group 组件支持 Joy UI 的四种全局变体：outlined（默认）、solid、soft 和 plain。

variant prop 传递给按钮，而不是 Button Group 本身。

尺寸

Button Group 组件有三种尺寸：sm、md（默认）和 lg。

<ButtonGroup size="sm" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup aria-label="plain button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="lg" aria-label="soft button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

<ButtonGroup size="sm" aria-label="outlined button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup aria-label="plain button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="lg" aria-label="soft button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
</ButtonGroup>

按 Enter 开始编辑

颜色

主题中包含的每个调色板都可通过 color prop 使用。尝试组合不同的颜色和不同的变体。

禁用

使用 disabled prop 禁用所有按钮。请注意，如果您直接在按钮上显式指定 disabled prop，它将覆盖 Button Group 中使用的 prop。

<ButtonGroup disabled aria-label="disabled button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
  <IconButton disabled={false}>
    <Settings />
  </IconButton>
</ButtonGroup>

<ButtonGroup disabled aria-label="disabled button group">
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
  <IconButton disabled={false}>
    <Settings />
  </IconButton>
</ButtonGroup>

按 Enter 开始编辑

间距

使用 spacing prop 控制按钮之间的间隙。如果 spacing 设置为 0（默认），则会调整按钮的半径以形成连续的表面。

<ButtonGroup spacing="0.5rem" aria-label="spacing button group">
  <Button>One</Button>
  <Button disabled>Two</Button>
  <Button>Three</Button>
  <IconButton>
    <Settings />
  </IconButton>
</ButtonGroup>

<ButtonGroup spacing="0.5rem" aria-label="spacing button group">
  <Button>One</Button>
  <Button disabled>Two</Button>
  <Button>Three</Button>
  <IconButton>
    <Settings />
  </IconButton>
</ButtonGroup>

按 Enter 开始编辑

值的类型可以是

string：任何有效的 CSS 长度单位，例如 px、rem、em 等。
number：将通过 theme.spacing 函数计算。
array：基于主题中定义的断点的响应式值。
object：key 必须是主题中定义的断点之一（默认为 "xs" | "sm" | "md" | "lg" | "xl"），value 是 string 或 number 类型的间距。

<ButtonGroup spacing={{ xs: 0, sm: 1, md: '2rem' }}>...</ButtonGroup>

垂直分组

Button Group 组件可以使用 orientation="vertical" prop 垂直显示。请注意，此 prop 对 IconButton 组件无效。

拉伸按钮

使用 buttonFlex prop 使按钮填充 Button Group 组件的可用空间。

最小宽度

对于大型容器，通过为 buttonFlex prop 提供有效的 CSS flex 值来控制按钮的默认宽度。

标题

Lorem Ipsum 只是印刷和排版行业的虚拟文本。

拆分按钮

Button Group 组件也可以用于创建拆分按钮。下拉菜单可以更改按钮操作（如本例所示），或用于立即触发相关操作。

分隔符颜色

当 Button Group 的 variant 不是 outlined 时，将在按钮之间创建分隔符。要控制分隔符的颜色，请通过 sx prop 覆盖 CSS 变量 --ButtonGroup-separatorColor。

hsl(0 100% 50%)

Button Group 组件支持任意子元素，通过保留相同的外观来包裹按钮。

<ButtonGroup variant="soft" aria-label="tooltip button group">
  <Tooltip arrow title="Go to profile">
    <Button startDecorator={<Person />}>Hover me</Button>
  </Tooltip>
  <Tooltip arrow title="Open settings">
    <span>
      <IconButton disabled>
        <Settings />
      </IconButton>
    </span>
  </Tooltip>
  <Tooltip arrow title="Go to profile">
    <Button endDecorator={<Person />}>Hover me</Button>
  </Tooltip>
</ButtonGroup>

<ButtonGroup variant="soft" aria-label="tooltip button group">
  <Tooltip arrow title="Go to profile">
    <Button startDecorator={<Person />}>Hover me</Button>
  </Tooltip>
  <Tooltip arrow title="Open settings">
    <span>
      <IconButton disabled>
        <Settings />
      </IconButton>
    </span>
  </Tooltip>
  <Tooltip arrow title="Go to profile">
    <Button endDecorator={<Person />}>Hover me</Button>
  </Tooltip>
</ButtonGroup>

按 Enter 开始编辑

常用示例

胶囊按钮组

使用 CSS 变量 --ButtonGroup-radius 来控制起始和结束按钮的半径。

<ButtonGroup
  aria-label="radius button group"
  sx={{ '--ButtonGroup-radius': '40px' }}
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
  <IconButton>
    <Settings />
  </IconButton>
</ButtonGroup>

<ButtonGroup
  aria-label="radius button group"
  sx={{ '--ButtonGroup-radius': '40px' }}
>
  <Button>One</Button>
  <Button>Two</Button>
  <Button>Three</Button>
  <IconButton>
    <Settings />
  </IconButton>
</ButtonGroup>

按 Enter 开始编辑

自定义分隔符

此示例使用 Divider 组件在按钮之间创建自定义分隔符。然后使用任意值设置 CSS 变量 --ButtonGroup-separatorColor 以删除默认分隔符。

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和 classes 的完整参考。

按钮组

简介

Playground

基础用法

自定义

变体

尺寸

颜色

禁用

间距

垂直分组

拉伸按钮

最小宽度

拆分按钮

分隔符颜色

与 Tooltip 一起使用

常用示例

胶囊按钮组

自定义分隔符

API