React-Bootstrap ButtonGroup 组件

React-Bootstrap 是一个流行的 React UI 库，提供了许多简单易用的组件。其中 ButtonGroup 组件能够让开发者轻松创建一个按钮组。

导入组件

在使用 ButtonGroup 组件前，我们需要先在项目中安装 React-Bootstrap。可以使用 npm 或 yarn 进行安装：

npm install react-bootstrap

yarn add react-bootstrap

在项目中导入 ButtonGroup 组件：

import ButtonGroup from 'react-bootstrap/ButtonGroup';

使用组件

使用 ButtonGroup 组件非常简单，只需将想要包裹在一起的按钮放在组件标签中即可。例如，下面的代码创建了一个包含三个按钮的组：

<ButtonGroup aria-label="Basic example">
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Middle</Button>
  <Button variant="secondary">Right</Button>
</ButtonGroup>

改变按钮样式

ButtonGroup 组件提供了一些属性可以用来改变按钮的样式：

• size：可以将按钮的尺寸改变为 sm（小号）、lg（大号）或不填（默认为普通尺寸）。
• vertical：设置为 true 可以将按钮组改变为垂直排列。
• toggle：设置为 true 可以将按钮组变为为可切换开关的样式。
• aria-label：为按钮组添加一个用于访问辅助技术的文本标签。

<ButtonGroup size="sm" vertical>
  <Button variant="secondary">Left</Button>
  <Button variant="secondary">Middle</Button>
  <Button variant="secondary">Right</Button>
</ButtonGroup>

总结

使用 React-Bootstrap ButtonGroup 组件可以轻松创建一个包含多个按钮的组，并改变按钮的样式。如果你不想自己写样式，推荐使用 React-Bootstrap 来实现界面。