云策 WordPress 开发者社区

块编辑器开发文档

ColorIndicator

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

概述

ColorIndicator 是一个 React 组件，用于在圆圈中渲染特定颜色，常用于在子组件中汇总使用的颜色集合。它作为单个组件，主要在侧边栏中使用。

关键要点

  • 组件功能：渲染颜色指示器，支持 CSS 背景属性值。
  • 使用场景：常用于 WordPress 侧边栏，作为颜色集合的视觉摘要。
  • 导入方式：通过 @wordpress/components 导入 ColorIndicator。

代码示例

import { ColorIndicator } from '@wordpress/components';

const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;

Props 说明

  • className: string - 可选，为 <span> 元素添加额外类名，默认包含 component-color-indicator。
  • colorValue: CSSProperties['background'] - 必需，指定指示器的颜色，支持 CSS background 属性的任何值。
📄 原文内容

ColorIndicator is a React component that renders a specific color in a circle. It’s often used to summarize a collection of used colors in a child component.

Single component

simple color indicator

Used in sidebar

multiple color indicator

Usage

import { ColorIndicator } from '@wordpress/components';

const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;

Props

The component accepts the following props:

className: string

Extra classes for the used <span> element. By default only component-color-indicator is added.

  • Required: No

colorValue: CSSProperties[ 'background' ]

The color of the indicator. Any value from the CSS background property is supported.

  • Required: Yes