ButtonGroup 按钮组

源代码 | 原版组件

按钮组：把若干 Button 排在一起，相邻按钮首尾相连成一块。

基本用法

import { Button, ButtonGroup } from "ooui-react";

function App() {
  return (
    <ButtonGroup>
      <Button icon="bold">加粗</Button>
      <Button icon="italic">斜体</Button>
      <Button icon="link">链接</Button>
    </ButtonGroup>
  );
}

export default App;

组内混用切换按钮

组里可以同时放普通按钮与 ToggleButton，常用于编辑器工具条。

加粗斜体清除格式

import { Button, ButtonGroup, ToggleButton } from "ooui-react";

function App() {
  return (
    <ButtonGroup>
      <ToggleButton icon="bold">加粗</ToggleButton>
      <ToggleButton icon="italic">斜体</ToggleButton>
      <Button icon="highlight" flags="destructive">
        清除格式
      </Button>
    </ButtonGroup>
  );
}

export default App;

组级禁用

给组设 disabled，会一并下发给组内的每个按钮，无需逐个设置。

复制剪切粘贴

import { Button, ButtonGroup } from "ooui-react";

function App() {
  return (
    <ButtonGroup disabled>
      <Button>复制</Button>
      <Button>剪切</Button>
      <Button>粘贴</Button>
    </ButtonGroup>
  );
}

export default App;

与原版的差异

原版的组禁用靠命令式逐个更新子按钮；本工程用 React 上下文把 disabled 下发到组内按钮，这是同等的声明式便捷行为——组内按钮的 disabled 取“自身或所属组禁用”之或。

API

属性	描述	类型	默认值
`children`	组内按钮（Button / ToggleButton 等）	`ReactNode`	—
`disabled`	组级禁用，一并下发到组内按钮	`boolean`	`false`
`...rest`	原生 `div` 属性（`className`、`id`、`data-*` 等）直传根元素	`HTMLAttributes<HTMLDivElement>`	—

另见

组内按钮：Button、ToggleButton
通用透传与 ref 规则：通用属性

#ButtonGroup 按钮组

#基本用法

#组内混用切换按钮

#组级禁用

#API

#另见

ButtonGroup 按钮组

基本用法

组内混用切换按钮

组级禁用

API

另见