@wordpress/admin-ui

最后更新：2026-10-17 10:55:29

用于构建一致的管理页面布局的 UI 组件。

虽然 @wordpress/ui 提供了低级别的、通用的 UI 组件，可以以灵活的方式组合来构建管理功能，但本软件包的目的是确保管理页面布局中常见页面结构的一致性。这包括对页面、侧边栏、页眉、导航以及其他标准化页面布局元素的高级抽象。标准化这些布局的目标是为用户提供连贯且可预测的体验。

安装

安装模块

npm install @wordpress/admin-ui --save

设置

此软件包需要来自多个依赖软件包的 CSS。

在 WordPress 内部

为确保正确的加载顺序，请将 wp-components 样式表添加为插件样式表的依赖项。有关如何指定依赖项的信息，请参阅 wp_enqueue_style 文档。

在 WordPress 外部

在你的应用程序中安装并加载这些样式表：

npm install @wordpress/admin-ui @wordpress/theme @wordpress/components

import '@wordpress/theme/design-tokens.css';
import '@wordpress/components/build-style/style.css';

样式表的 RTL（从右到左）版本位于相同的路径中，但文件名后附加了 -rtl（style-rtl.css）。设计令牌样式表是通用的，没有单独的 RTL 版本。

API

Breadcrumbs

渲染面包屑导航路径。

除最后一项外，所有项目都必须提供 to 属性用于导航。在开发模式下，如果非最后一项缺少 to 属性，将抛出错误。最后一项代表当前页面，其 to 属性是可选的。只有最后一项（当它没有 to 属性时）才渲染为 h1。

用法

<Breadcrumbs
    items={ [
        { label: 'Home', to: '/' },
        { label: 'Settings', to: '/settings' },
        { label: 'General' },
    ] }
/>

参数

props BreadcrumbsProps:
props.items BreadcrumbsProps[ 'items' ]: 要显示的面包屑项目。

getAdminThemeColors

从 admin-color-* body 类中读取活动的 WordPress 管理颜色方案，并返回其主要颜色和背景颜色。旨在为 ThemeProvider（color 属性）提供种子数据，以便设计系统匹配用户选择的管理颜色方案。

AdminThemeColors: 活动管理颜色方案的主要颜色和背景颜色。

NavigableRegion

未记录的声明。

Page

未记录的声明。

为此软件包做出贡献

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

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