云策 WordPress 开发者社区

块编辑器开发文档

Divider

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

概述

Divider 是一个用于分隔相关内容组的布局组件，目前处于实验阶段，这意味着其实现可能发生重大变更。

关键要点

  • Divider 是一个实验性组件，使用时需注意其不稳定性。
  • 组件支持水平和垂直方向，默认方向为 horizontal。
  • 提供 margin、marginEnd、marginStart 等属性来调整内联维度的边距。
  • Divider 继承自 Separator 组件的所有属性。

代码示例

import {
    __experimentalDivider as Divider,
} from `@wordpress/components`;
import { Stack } from '@wordpress/ui';

function Example() {
    return (
        <Stack direction="column" gap="lg">
            <span>Some text here</span>
            <Divider />
            <span>Some more text here</span>
        </Stack>
    );
}

注意事项

  • 在 flex 容器中使用时，可能需要确保 Divider 被拉伸对齐以使其可见。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Divider is a layout component that separates groups of related content.

Usage

import {
    __experimentalDivider as Divider,
} from `@wordpress/components`;
import { Stack } from '@wordpress/ui';

function Example() {
    return (
        <Stack direction="column" gap="lg">
            <span>Some text here</span>
            <Divider />
            <span>Some more text here</span>
        </Stack>
    );
}

Props

margin: number

Adjusts all margins on the inline dimension.

  • Required: No

marginEnd: number

Adjusts the inline-end margin.

  • Required: No

marginStart: number

Adjusts the inline-start margin.

  • Required: No

orientation: horizontal | vertical

Divider’s orientation. When using inside a flex container, you may need to make sure the divider is stretch aligned in order for it to be visible.

  • Required: No
  • Default: horizontal

Inherited props

Divider also inherits all of the Separator props.