在 React 中使用蓝图 UI 构建弹出窗口、警报和 Toast

0 Shares

使用 Blueprint UI 构建 React 应用程序中的弹出窗口、警报和提示

Blueprint UI 是一个著名的 React UI 工具包，它提供了一系列可重用的组件和样式，用于构建现代 Web 应用程序。其主要功能之一是支持创建弹出窗口、警报和提示（toast），这些是向用户展示信息和反馈的关键元素。

安装 Blueprint UI

要开始使用 Blueprint UI，您首先需要进行安装。您可以使用任何您选择的包管理器来完成此操作。

如果您使用 JavaScript 包管理器 npm，请在终端中运行以下命令：

npm install @blueprintjs/core

安装 Blueprint UI 后，您必须从库中导入 CSS 文件：

@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

通过导入这些文件，您可以将 Blueprint UI 的样式与 Blueprint UI 提供的组件整合起来。

使用 Blueprint UI 创建弹出窗口

弹出窗口是当用户将鼠标悬停在元素上或点击元素时出现的工具提示。它们为用户提供额外的资讯或选项。

要在 React 应用程序中使用 Blueprint UI 创建弹出窗口，您必须安装 Blueprint UI 的 Popover2 组件。

为此，请在终端中运行以下代码：

npm install --save @blueprintjs/popover2

请务必在您的 CSS 文件中导入包的样式表：

@import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";

导入样式表后，您就可以使用 Popover2 组件在应用程序中创建弹出窗口。

例如：

import React from "react";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";

function App() {
  const popoverContent = (
    <div>
      <h3>弹出窗口标题</h3>
      <p>这是弹出窗口内的内容。</p>
    </div>
  );

  return (
    <div>
      <Popover2 content={popoverContent}>
        <Button intent="success" text="点击我" />
      </Popover2>
    </div>
  );
}

export default App;

这段代码使用 Popover2 组件创建了一个弹出窗口。它还定义了一个 popoverContent 变量，其中包含弹出窗口内容的 JSX 代码。

Popover2 组件将 popoverContent 作为其 content 属性的值。content 属性指定弹出窗口中显示的内容。在这里，Popover2 组件包裹了一个 Button 组件。这使得当您点击按钮时，弹出窗口就会显示出来。

一个简单的弹出窗口看起来会像这样：

您可以通过将 className 属性传递给 popoverContent JSX 代码来设置弹出窗口内容的样式：

const popoverContent = (
  <div className="popover">
    <h3>弹出窗口标题</h3>
    <p>这是弹出窗口内的内容。</p>
  </div>
);

然后您可以在 CSS 文件中定义 CSS 类：

.popover {
  padding: 1rem;
  background-color: #e2e2e2;
  font-family: cursive;
}

现在弹出窗口应该看起来更美观了：

Popover2 组件需要一些属性来帮助您配置它以满足您的需求。这些属性包括 popoverClassName、onInteraction、isOpen、minimal 和 placement。

Placement 属性决定了弹出框相对于目标元素的首选位置。其可用值包括：

auto
auto-start
auto-end
top
top-start
top-end
bottom
bottom-start
bottom-end
right
right-start
right-end
left
left-start
left-end

通过 popoverClassName，您可以为弹出框元素定义 CSS 类名称。您首先需要在 CSS 文件中创建一个 CSS 类，以便使用此属性。

例如：

.custom-popover {
    background-color: #e2e2e2;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    border-radius: 12px;
    padding: 1rem;
}

创建 CSS 类后，使用 popoverClassName 属性将自定义样式应用于 Popover2 组件：

<Popover2
  content={popoverContent}
  placement="bottom-end"
  popoverClassName="custom-popover"
  minimal={true}
>
  <Button intent="success" text="点击我" />
</Popover2>

minimal 属性控制弹出框的样式。它接受一个布尔值。如果设置为 true，弹出窗口将具有最小的样式，没有箭头和一个简单的框外观。

创建警报

警报是在屏幕上出现的通知，通知用户重要的信息或操作。它们通常用于显示错误消息、成功消息或警告。

在 Blueprint UI 中创建警报与使用 Chakra UI 创建警报类似。您将使用 Alert 组件在您使用 Blueprint UI 的 React 应用程序中创建警报。

这是一个例子：

import React from "react";
import { Alert, Button } from "@blueprintjs/core";

function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Alert isOpen={isOpen} onClose={handleClose} confirmButtonText="关闭">
        <p>这是一条警报消息</p>
      </Alert>

      <Button text="点击我" intent="success" onClick={handleOpen} />
    </div>
  );
}

export default App;

此示例演示了如何从 @blueprintjs/core 包导入 Alert 组件。警报组件在屏幕上呈现警报消息。它还需要三个属性：isOpen、onClose 和 confirmButtonText。

isOpen 属性确定警报是否可见。设置为 true 以显示警报，设置为 false 以隐藏警报。onClose 属性是一个回调函数，在用户关闭警报时运行。

最后，confirmButtonText 属性决定确认按钮上显示的文本。

本例中的警报通知将如下所示：

使用 Blueprint UI 创建提示 (Toast)

提示 (Toast) 是出现在屏幕上的通知，用于通知用户重要的信息或事件。它们与警报类似，但通常干扰性较小，并且会快速消失。

要在 React 应用程序中使用 Blueprint UI 创建提示 (Toast)，请使用 OverlayToaster 组件。 OverlayToaster 组件创建 Toaster 实例，然后使用该实例创建单独的提示。

例如：

import React from "react";
import { OverlayToaster, Button } from "@blueprintjs/core";

const toasterInstance = OverlayToaster.create({ position: "top-right" });

function App() {
  const showToast = () => {
    toasterInstance.show({
      message: "这是一个提示",
      intent: "primary",
      timeout: 3000,
      isCloseButtonShown: false,
      icon: "bookmark",
    });
  };

  return (
    <div>
      <Button text="点击我" intent="success" onClick={showToast} />
    </div>
  );
}

export default App;

上面的代码块使用 OverlayToaster.create 方法生成一个 Toaster 实例，并使用 position 属性指定其位置。

它还定义了一个 showToast 函数。此函数使用 toasterInstance 的 show 方法在调用时显示提示 (Toast)。show 方法接受一个带有 message、intent、timeout、isCloseButtonShown 和 icon 属性的对象。

message 属性指定提示的文本内容，而 intent 属性指定提示的类型。提示的样式将根据其值而有所不同。

您可以使用 timeout 属性控制提示通知显示的时间长度。 icon 属性指定要在提示中显示的图标元素。使用 isCloseButtonShown 属性，您可以控制在提示中是否显示关闭按钮。

当您点击按钮时，上面的代码块将生成一个漂亮的提示 (Toast)，如下图所示。

如果您希望在 React 应用程序中创建吸引人的提示通知，Blueprint UI 是一个不错的选择。它提供了广泛的预定义组件，您可以使用它们来创建与应用程序风格相匹配的通知。

但是，如果您正在开发一个不需要 Blueprint UI 所有功能的小型项目，React Toastify 是一个创建漂亮通知的轻量级替代方案。

使用提示、弹出窗口和警报增强用户体验

您已经学习了如何在 React 应用程序中使用 Blueprint UI 创建弹出窗口、警报和提示。这些组件对于向用户提供信息和反馈至关重要，并且可以显著增强应用程序的用户体验。您可以使用您所学的信息轻松地创建这些组件，只需付出最少的努力和定制。