云策 WordPress 开发者社区

块编辑器开发文档

ZStack

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

概述

ZStack 是一个实验性的 WordPress 组件，用于沿 Z 轴堆叠子元素，支持层叠和偏移控制。目前处于早期阶段，可能发生重大变更。

关键要点

  • ZStack 允许通过 Z 轴堆叠元素，提供 isLayered、isReversed 和 offset 等属性来调整层叠顺序和间距。
  • 组件从 '@wordpress/components' 导入，使用时需注意其实验性状态，可能不稳定。
  • offset 属性在 LTR 和 RTL 布局中会自动反转值，确保间距一致。

代码示例

import { __experimentalZStack as ZStack } from '@wordpress/components';

function Example() {
    return (
        <ZStack offset={ 20 } isLayered>
            <ExampleImage />
            <ExampleImage />
            <ExampleImage />
        </ZStack>
    );
}

注意事项

  • ZStack 是实验性功能，实现可能发生剧烈变化，使用时需谨慎。
  • children 属性是必需的，用于指定要堆叠的子元素。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Usage

ZStack allows you to stack things along the Z-axis.

import { __experimentalZStack as ZStack } from '@wordpress/components';

function Example() {
    return (
        <ZStack offset={ 20 } isLayered>
            <ExampleImage />
            <ExampleImage />
            <ExampleImage />
        </ZStack>
    );
}

Props

isLayered: boolean

Layers children elements on top of each other (first: highest z-index, last: lowest z-index).

  • Required: No
  • Default: true

isReversed: boolean

Reverse the layer ordering (first: lowest z-index, last: highest z-index).

  • Required: No
  • Default: false

offset: number

The amount of space between each child element. Its value is automatically inverted (i.e. from positive to negative, and viceversa) when switching from LTR to RTL.

  • Required: No
  • Default: 0

children: ReactNode

The children to stack.

  • Required: Yes