@wordpress/admin-ui

查看官方原文 ↗

💡 云策文档标注

概述

@wordpress/admin-ui 是一个 WordPress 包，提供用于构建一致管理页面布局的高级 UI 组件。它基于 @wordpress/ui 的低级组件，专注于标准化页面结构元素，如页面、侧边栏、导航等，以确保用户界面的统一性和可预测性。

关键要点

提供高级抽象组件，用于构建管理页面的标准布局结构。
依赖 @wordpress/theme 和 @wordpress/components 的 CSS 样式表，需正确加载以确保样式一致。
包含 Breadcrumbs 组件，用于渲染面包屑导航，要求非最后项提供 to 属性，最后项可选。
支持在 WordPress 内外使用，需安装并导入相关样式文件。
是 Gutenberg 项目的一部分，采用 monorepo 结构，鼓励贡献。

代码示例

// 安装包
npm install @wordpress/admin-ui --save

// 在 WordPress 外使用时的样式导入
import '@wordpress/theme/design-tokens.css';
import '@wordpress/components/build-style/style.css';
import '@wordpress/admin-ui/build-style/style.css';

// Breadcrumbs 组件使用示例
<Breadcrumbs
    items={ [
        { label: 'Home', to: '/' },
        { label: 'Settings', to: '/settings' },
        { label: 'General' },
    ] }
/>

注意事项

在 WordPress 中，需将 wp-components 样式表作为插件样式表的依赖，以确保加载顺序正确。
RTL 版本的样式表文件名以 -rtl 结尾（如 style-rtl.css），但设计令牌样式表是通用的，无单独 RTL 版本。
Breadcrumbs 组件在开发模式下，如果非最后项缺少 to 属性会抛出错误。
NavigableRegion 和 Page 组件在文档中未详细说明，使用时需参考其他资源或源码。

📄 原文内容

UI components for building consistent admin page layouts.

While @wordpress/ui provides low-level, generic UI components that can be composed in flexible arrangements for building admin features, the purpose of this package is to guarantee consistency in the common page structure of an admin page layout. This includes high-level abstractions for a page, its sidebar, header, navigation, and other standardized page layout elements. The goal of standardizing these layouts is to provide a cohesive and predictable experience for users.

Installation

Install the module

npm install @wordpress/admin-ui --save

Setup

This package requires CSS from this package and from multiple dependency packages.

Within WordPress

To ensure proper load order, add the wp-components stylesheet as a dependency of your plugin’s stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

Outside WordPress

Install and load these stylesheets in your application:

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

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

RTL versions of the stylesheets are available in the same paths, but with -rtl appended to the filename (style-rtl.css). The design tokens stylesheet is universal and does not have a separate RTL version.

API

Breadcrumbs

Renders a breadcrumb navigation trail.

All items except the last one must provide a to prop for navigation. In development mode, an error is thrown when a non-last item is missing to. The last item represents the current page and its to prop is optional. Only the last item (when it has no to prop) is rendered as an h1.

Usage

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

Parameters

props BreadcrumbsProps:
props.items BreadcrumbsProps[ 'items' ]: The breadcrumb items to display.

NavigableRegion

Undocumented declaration.

Page