React-Bootstrap按钮组件

React-Bootstrap是一个基于Bootstrap的UI库，提供了一些扩展的React组件，其中包括了按钮组件。

安装

通过npm进行安装：

npm install react-bootstrap

或者使用yarn安装：

yarn add react-bootstrap

使用

首先要导入需要的组件：

import Button from 'react-bootstrap/Button';

然后即可在需要的地方使用Button组件：

<Button variant="primary">Click me!</Button>

这个例子展示了一个使用了variant属性的Button组件。variant属性用于指定按钮的颜色主题。在这个例子中，按钮的颜色主题设置为primary。

颜色主题

React-Bootstrap提供了多种颜色主题，包括：

• primary
• secondary
• success
• danger
• warning
• info
• light
• dark

可以使用variant属性来指定颜色主题：

<Button variant="success">Success</Button>

尺寸

除了颜色主题，Button组件还提供了三种尺寸：sm、lg和block。sm表示小号按钮，lg表示大号按钮，block表示块级按钮（会占据整个父元素的宽度）。

使用方式如下：

<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="primary" size="block">Block</Button>

禁用状态

可以通过设置disabled属性禁用按钮：

<Button variant="primary" disabled>Disabled</Button>

链接按钮

除了普通的按钮类型，Button组件还提供了一种特殊的类型：链接按钮（也称为“a标签按钮”）。使用href属性可以为按钮添加链接：

<Button variant="primary" href="https://www.example.com">Link</Button>

图标按钮

在Button组件内部嵌套一个Icon组件，就可以实现图标按钮：

<Button variant="primary">
  <FontAwesomeIcon icon={faCoffee} style={{ marginRight: '5px' }} />
  Coffee
</Button>

在这个例子中，使用了FontAwesome库提供的Coffee图标，并将其渲染在Button组件的左侧。

自定义样式

React-Bootstrap的Button组件提供了多种样式自定义方式。比如，可以使用style属性为按钮添加内联样式：

<Button
  variant="primary"
  style={{ backgroundColor: 'red', boxShadow: 'none' }}
>
  Custom Style
</Button>

也可以使用classNames属性为按钮添加样式类名：

<Button
  variant="primary"
  className="custom-class-1 custom-class-2"
>
  Custom Class
</Button>

参考资料

• React-Bootstrap Button Component