阴影

此组件已弃用。请改用 elevation tokens 中的 @wordpress/base-styles。

Elevation 是一个核心组件，使用组件系统的阴影系统来渲染阴影。

用法

阴影效果是使用 value prop 生成的。

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

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

Props

active: number

处于活动状态时的阴影值大小（请参阅 value 和 isInteractive props）。

• 是否必需：否

borderRadius: CSSProperties[ ‘borderRadius’ ]

渲染阴影的边框半径。

• 是否必需：否
• 默认值：inherit

focus: number

获得焦点时的阴影值大小（请参阅 value 和 isInteractive props）。

• 是否必需：否

hover: number

鼠标悬停时的阴影值大小（请参阅 value 和 isInteractive props）。

• 是否必需：否

isInteractive: boolean

确定是否应自动计算并渲染 hover、active 和 focus 阴影值。

• 是否必需：否
• 默认值：false

offset: number

阴影的尺寸偏移量（边距）。

• 是否必需：否
• 默认值：0

value: number

阴影的大小，基于样式系统的层级系统。value 决定了阴影的强度，从而产生深度感。

在下面的示例中，启用了 isInteractive 以提供更好的深度感。

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

function Example() {
    return (
        <div>
            <Elevation isInteractive value={ 200 } />
        </div>
    );
}

• 是否必需：否
• 默认值：0