云策 WordPress 开发者社区

块编辑器开发文档

HStack

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

概述

HStack 是 WordPress 组件库中的一个实验性水平堆栈组件，用于水平排列子元素。它基于 Flexbox 实现，支持多种对齐、间距和布局控制。

关键要点

  • HStack 是实验性功能，可能发生重大变更，使用时需注意兼容性。
  • 通过导入 __experimentalHStack 使用，可渲染任意子元素。
  • 提供 alignment、direction、spacing、wrap 等 Props 来调整布局和对齐方式。
  • 支持 Spacer 组件，用于自适应填充剩余空间或推离子元素。

代码示例

import { __experimentalHStack as HStack } from '@wordpress/components';

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

注意事项

  • 由于是实验性组件，不建议在生产环境中直接使用，需关注后续更新。
  • spacing 值基于 4px 网格系统作为乘数，需合理设置以避免布局问题。
  • 使用 Spacer 时，注意其自适应行为可能影响整体布局。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

HStack (Horizontal Stack) arranges child elements in a horizontal line.

Usage

HStack can render anything inside.

import { __experimentalHStack as HStack } from '@wordpress/components';

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

Props

alignment

Type: HStackAlignment | CSS[ '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

Type: 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

Type: boolean

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

justify

Type: CSS['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

Type: CSS['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

Type: boolean

Determines if children should wrap.

Spacer

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

import {
    __experimentalHStack as HStack,
    __experimentalSpacer as Spacer,
} from '@wordpress/components';

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

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

import {
    __experimentalHStack as HStack,
    __experimentalSpacer as Spacer,
} from '@wordpress/components';

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