云策 WordPress 开发者社区

块编辑器开发文档

VStack

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

概述

VStack 是 WordPress 组件库中的一个实验性布局组件，用于垂直排列子元素。它基于 Flexbox 实现，提供多种对齐、间距和方向控制选项，并可与 Spacer 组件结合使用以优化空间分配。

关键要点

  • VStack 是实验性功能，可能发生重大变更，使用时需注意稳定性。
  • 核心功能是垂直堆叠子元素，支持通过 props 如 alignment、direction、spacing 进行自定义布局。
  • 可与 Spacer 组件集成，实现自适应空间填充或元素间隔控制。
  • 导入路径为 '@wordpress/components' 中的 __experimentalVStack。

代码示例

import { __experimentalVStack as VStack } from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <span>Code</span>
            <span>is</span>
            <span>Poetry</span>
        </VStack>
    );
}

注意事项

由于是实验性组件，建议在非生产环境中测试，并关注 WordPress 更新日志以获取变更信息。

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

VStack (or Vertical Stack) is a layout component that arranges child elements in a vertical line.

Usage

VStack can render anything inside.

import { __experimentalVStack as VStack } from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <span>Code</span>
            <span>is</span>
            <span>Poetry</span>
        </VStack>
    );
}

Props

alignment: HStackAlignment | CSSProperties['alignItems']

Determines how the child elements are aligned.

  • top: Aligns content to the top.
  • topLeft: Aligns content to the top/left.
  • topRight: Aligns content to the top/right.
  • left: Aligns content to the left.
  • center: Aligns content to the center.
  • right: Aligns content to the right.
  • bottom: Aligns content to the bottom.
  • bottomLeft: Aligns content to the bottom/left.
  • bottomRight: Aligns content to the bottom/right.
  • edge: Justifies content to be evenly spread out up to the main axis edges of the container.
  • stretch: Stretches content to the cross axis edges of the container.

direction: FlexDirection

The direction flow of the children content can be adjusted with direction. column will align children vertically and row will align children horizontally.

expanded: boolean

Expands to the maximum available width (if horizontal) or height (if vertical).

justify: CSSProperties['justifyContent']

Horizontally aligns content if the direction is row, or vertically aligns content if the direction is column.
In the example below, flex-start will align the children content to the left.

spacing: CSSProperties['width']

The amount of space between each child element. Spacing in between each child can be adjusted by using spacing.
The value of spacing works as a multiplier to the library’s grid system (base of 4px).

wrap: boolean

Determines if children should wrap.

Spacer

When a Spacer is used within an VStack, the Spacer adaptively expands to take up the remaining space.

import {
    __experimentalSpacer as Spacer,
    __experimentalVStack as VStack,
} from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <span>Code</span>
            <Spacer>
                <span>is</span>
            </Spacer>
            <span>Poetry</span>
        </VStack>
    );
}

Spacer can also be used in-between items to push them apart.

import {
    __experimentalSpacer as Spacer,
    __experimentalVStack as VStack,
} from '@wordpress/components';

function Example() {
    return (
        <VStack>
            <span>Code</span>
            <Spacer />
            <span>is</span>
            <span>Poetry</span>
        </VStack>
    );
}