React Bootstrap 按钮

Bootstrap 提供了几种预先设置样式的按钮，可在我们的 Web 应用程序中使用。这些按钮可用于表单、对话框和其他需要用户操作的地方。

我们可以选择支持不同大小、状态等的不同按钮。可以通过定义 <Button></Button> 组件来使用按钮。它导入如下

如何使用 React Bootstrap 按钮？

要使用按钮，请使用 variant 属性定义 <Button> 组件，以应用来自一系列按钮的预定义按钮样式。 variant 属性允许我们定义按钮的类型。Bootstrap 中有不同类型的按钮。定义 Button 组件后，我们必须从 react-bootstrap 库中导入它。让我们用一个例子来理解它

App.js

输出

从上面的输出中，我们可以看到不同类型的按钮。我们可以根据我们的要求使用其中任何一个，通过指定按钮变体。

轮廓按钮

Bootstrap 还支持更轻巧的时尚轮廓按钮，而无需背景颜色。轮廓按钮的变体名称以 outlined-* 开头；例如，如果我们想将成功按钮用作轮廓，则其变体名称将为 outlined-success。

考虑下面的示例

App.js

输出

这些按钮提供更轻巧的触感。悬停在轮廓按钮上时，背景颜色会根据按钮的变体填充。

带有 as 属性的 Button 组件

通常，<Button> 组件呈现普通的 HTML <button> 标签，但是，当它与 as 或 href 属性一起使用时，它会呈现相应的元素。例如，如果我们使用如下所示的按钮

然后它将呈现以下元素

这意味着它将呈现 <a> 标签而不是 <button> 标签。但是，它将保留按钮的样式。

同样，如果我们使用 button with as="input" 属性值。它将呈现一个 <input> 元素而不是 <button> 元素。

上面的组件将呈现以下 HTML 元素

但是上述元素的外观和感觉将与按钮相同。

考虑下面的示例

App.js

输出

从上面的输出中，我们可以看到呈现的元素看起来像按钮；它们不是 <button> 元素，而是作为定义的属性值呈现的。

按钮大小

Bootstrap 还支持大号和小号按钮。 size 属性用于定义按钮的大小。大按钮具有更大的字体大小和填充值。

考虑下面的示例

App.js

输出

块级按钮

Bootstrap 支持响应式全宽块按钮。我们可以混合使用 display 和 gap 实用程序，以根据我们的要求定位它们。

考虑下面的示例

App.js

输出

活动按钮

要使按钮处于活动状态，请将 active 属性传递给按钮组件。

App.js

输出

禁用状态按钮

我们可以通过将 disabled 属性传递给按钮组件来默认禁用按钮。

App.js

输出

注意：默认情况下，<a> 标签不支持禁用属性。虽然它在浏览器中呈现，但它由 point-events 处理。但是，并非所有浏览器都支持它。

加载按钮

加载按钮对于在浏览器上呈现输出时显示加载…消息很有用。在呈现输出时向用户显示加载消息是一个很好的用户体验实践。

通常，我们使用加载程序来显示加载消息，但在 React 中，我们可以通过更新 <Button> 组件的状态来处理这个问题。

考虑下面的示例

App.js

输出

当我们点击上面的按钮时，它将显示在我们的 App.js 文件中指定的“数据正在加载”消息。

复选框 / 单选按钮

按钮也可以用于自定义复选框和单选按钮组件。它将有助于创建一个切换按钮，该按钮将在一个元素表单组件内工作。但是，我们需要手动处理复选框和单选按钮的选中状态。

在 <ButtonGroup> 组件内的 <ToggleButtonGroup> 组件非常适合选中状态管理。 <ButtonGroup> 组件类似于表单组件；它表示复选框或单选组的所选值数组的值。

考虑下面的示例

App.js

输出

这里，选中的按钮将呈现以下 HTML 元素

同样，单选按钮将呈现以下 HTML 元素

以上 HTML 元素将清楚地说明复选框和单选按钮在浏览器上呈现元素的方式。

在这里，我们讨论了 React Bootstrap 中不同类型的按钮。现在，我们可以将按钮用于不同目的，并使用不同的样式。