云策 WordPress 开发者社区

块编辑器开发文档

Elevation

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

概述

Elevation 是一个实验性的 WordPress 核心组件，用于渲染阴影效果，基于组件系统的阴影系统实现。它通过 props 控制阴影大小、交互状态和样式，适用于增强界面深度感。

关键要点

  • Elevation 组件目前处于实验阶段，API 可能发生重大变更。
  • 使用 value prop 设置阴影大小，基于样式系统的 elevation 系统。
  • 支持交互状态（hover、active、focus）的阴影自动计算，通过 isInteractive prop 启用。
  • 可配置边框半径（borderRadius）、偏移量（offset）等样式属性。

代码示例

import {
    __experimentalElevation as Elevation,
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function Example() {
    return (
        <Surface>
            <Text>Code is Poetry</Text>
            <Elevation value={ 5 } />
        </Surface>
    );
}

注意事项

由于是实验性功能，开发者在使用时需注意潜在的破坏性更新风险。

📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Elevation is a core component that renders shadow, using the component system’s shadow system.

Usage

The shadow effect is generated using the value prop.

import {
    __experimentalElevation as Elevation,
    __experimentalSurface as Surface,
    __experimentalText as Text,
} from '@wordpress/components';

function Example() {
    return (
        <Surface>
            <Text>Code is Poetry</Text>
            <Elevation value={ 5 } />
        </Surface>
    );
}

Props

active: number

Size of the shadow value when active (see the value and isInteractive props).

  • Required: No

borderRadius: CSSProperties[ 'borderRadius' ]

Renders the border-radius of the shadow.

  • Required: No
  • Default: inherit

focus: number

Size of the shadow value when focused (see the value and isInteractiveprops).

  • Required: No

hover: number

Size of the shadow value when hovered (see the value and isInteractive props).

  • Required: No

isInteractive: boolean

Determines if hover, active, and focus shadow values should be automatically calculated and rendered.

  • Required: No
  • Default: false

offset: number

Dimensional offsets (margin) for the shadow.

  • Required: No
  • Default: 0

value: number

Size of the shadow, based on the Style system’s elevation system. The value determines the strength of the shadow, which sense of depth.

In the example below, isInteractive is activated to give a better sense of depth.

import { __experimentalElevation as Elevation } from '@wordpress/components';

function Example() {
    return (
        <div>
            <Elevation isInteractive value={ 200 } />
        </div>
    );
}
  • Required: No
  • Default: 0