@wordpress/notices

通知的状态管理和 UI 组件。

安装

安装模块

npm install @wordpress/notices

此包假定你的代码将在 ES2015+ 环境中运行。如果你使用的环境对此类语言特性和 API 的支持有限或完全不支持，你应在代码中引入 @wordpress/babel-preset-default 中附带的 polyfill。

用法

导入后，notices 模块会在 core/notices 命名空间上注册一个数据存储。在 WordPress 中，可通过 wp.data.dispatch( 'core/notices' ) 访问该数据存储。

有关从数据存储中消费数据的更多信息，请参阅 @wordpress/data 的数据访问和操作文档。

有关 core/notices 命名空间中可用的全部 actions 和 selectors 的列表，请参阅 Notices Data 手册页。

组件

该包还导出了由 core/notices store 驱动的开箱即用的通知 UI 组件。

InlineNotices

渲染类型为 default 的通知列表：

• 固定列表中的不可关闭通知。
• 可移除列表中的可关闭通知。

children 会渲染在可关闭列表中。

属性

• children: ReactNode（可选）：在可关闭通知列表中渲染的附加内容。
• className: string（可选）：添加到内联通知包装器的额外类名。
• pinnedNoticesClassName: string（可选）：添加到固定列表的额外类名。
• dismissibleNoticesClassName: string（可选）：添加到可关闭列表的额外类名。
• context: string（可选）：用于读取和移除通知的通知上下文。默认值为 default。

SnackbarNotices

使用 SnackbarList 渲染类型为 snackbar 的通知。

• 它会渲染最近三个 snackbar 通知。
• 关闭操作已连接到 removeNotice。

属性

• className: string（可选）：添加到 snackbar 列表的额外类名。
• context: string（可选）：用于读取和移除通知的通知上下文。默认值为 default。

示例

import { useDispatch } from '@wordpress/data';
import {
    InlineNotices,
    SnackbarNotices,
    store as noticesStore,
} from '@wordpress/notices';

function AppNotices() {
    const { createSuccessNotice } = useDispatch( noticesStore );
    const noticeContext = 'my-plugin/screen';

    return (
        <>
            <button
                onClick={ () =>
                    createSuccessNotice( 'Saved successfully.', {
                        type: 'snackbar',
                        context: noticeContext,
                    } )
                }
            >
                Create snackbar notice
            </button>

            <InlineNotices
                pinnedNoticesClassName="my-plugin-notices__pinned"
                dismissibleNoticesClassName="my-plugin-notices__dismissible"
                context={ noticeContext }
            />
            <SnackbarNotices
                className="my-plugin-notices__snackbar"
                context={ noticeContext }
            />
        </>
    );
}

为此包做贡献

这是一个独立包，是 Gutenberg 项目的一部分。该项目组织为 monorepo。它由多个自包含的软件包组成，每个包都有特定用途。此 monorepo 中的包发布到 npm，并由 WordPress 以及其他软件项目使用。

要了解更多关于为此包或整个 Gutenberg 项目做贡献的信息，请阅读项目的主要 贡献者指南。