云策 WordPress 开发者社区

块编辑器开发文档

Placeholder

查看官方原文 ↗
💡 云策文档标注

概述

本文档介绍了 WordPress 组件库中的 Placeholder 组件，用于在界面中显示占位内容，支持图标、标签、指令等属性配置。

关键要点

  • Placeholder 组件可从 @wordpress/components 导入，用于创建占位符界面元素。
  • 组件支持多种 props，包括 icon、label、instructions、isColumnLayout、notices、preview 和 withIllustration，均为可选属性。
  • icon 属性可接受字符串、函数或组件类型，用于在占位符中显示图标。
  • isColumnLayout 属性可切换子元素布局为 flex-column，默认布局为 flex-row。
  • withIllustration 属性可启用占位符插图输出。

代码示例

import { Placeholder } from '@wordpress/components';
import { more } from '@wordpress/icons';

const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
📄 原文内容

Usage

import { Placeholder } from '@wordpress/components';
import { more } from '@wordpress/icons';

const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;

Props

className: string

Class to set on the container div.

  • Required: No

icon: string|Function|Component|null

If provided, renders an icon next to the label.

  • Required: No

instructions: string

Instructions of the placeholder.

  • Required: No

isColumnLayout: boolean

Changes placeholder children layout from flex-row to flex-column.

  • Required: No

label: string

Title of the placeholder.

  • Required: No

notices: ReactNode

A rendered notices list

  • Required: No

preview: ReactNode

Preview to be rendered in the placeholder.

  • Required: No

withIllustration: boolean

Outputs a placeholder illustration.

  • Required: No