介绍
@atlaskit/atlassian-notifications 是一款 Atlassian 风格的通知组件，适用于 React 应用程序。它可以让您轻松地创建和管理 Atlassian 风格的通知，如“成功”、“错误”、“警告”等。本文将为您介绍该 npm 包的使用方法，包括安装、配置、使用和示例。
准备工作
在使用 @atlaskit/atlassian-notifications 之前，您需要先安装 React 和 React-DOM。如果您已有 React 应用程序，那么请跳过此步骤。
您可以使用以下命令安装 React 和 React-DOM：
npm install --save react react-dom
安装
使用以下命令安装 @atlaskit/atlassian-notifications：
npm install --save @atlaskit/atlassian-notifications
配置
在您的组件中，您需要导入相应的文件和样式：
import Notifications, { NotificationIndicator } from '@atlaskit/atlassian-notifications';
import '@atlaskit/atlassian-notifications/dist/bundle.css';使用
基本用法
您可以使用 Notifications 组件来创建基本的通知：
-- -------------------- ---- -------
-------- ----- -
------ -
-----
---------------
---------------------- --
----------------
------
--
-创建通知
要创建通知，请使用 Notification 组件。在其中，您可以指定通知的类型（例如“成功”、“错误”等）、标题、消息和操作：
-- -------------------- ---- -------
-------- ----- -
------ -
-----
---------------
-------------
--------------
------------
--------------------
---------
------- ---------------------
--
---------
-
--
----------------
------
--
-状态管理
@atlaskit/atlassian-notifications 支持一些状态管理。如：
isInAtlassianProduct: 控制组件是否显示在 Atlassian 应用程序中。onClose: 控制何时关闭通知。
-- -------------------- ---- -------
-------- ----- -
----- ------------------ -------------------- - ---------------
------ -
-----
----------------- -- -
--------------
---------------------------
----------- -- ---------------------------
-
-------------
--------------
------------
--------------------
---------
------- ---------------------
--
---------
-
--
----------------
--
------
--
-示例
您可以使用以下代码示例来测试 @atlaskit/atlassian-notifications 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- - ------------- --------------------- - ---- ------------------------------------
------ ----------------------------------------------------
------ ------ ---- -------------------
-------- ----- -
----- ------------------ -------------------- - ---------------
------ -
-----
--------------
---------------------------
----------- -- ---------------------------
-
---------------------- --
----------------- -- -
-------------
--------------
------------
--------------------
---------
------- -------------------- ----------- -- ----------------------------
--
---------
-
--
--
----------------
------
--
-
------ ------- ----运行上述代码示例，您将在页面上看到一个通知栏，单击“操作成功”通知后，它将关闭。
结论
@atlaskit/atlassian-notifications 是一种方便、易用且同时功能强大的通知组件，适用于 Atlassian 风格的 React 应用程序。通过本文所介绍的安装、配置和使用方式，您可以轻松地在自己的应用程序中使用它。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72d6c9a9b7065299ccbbde