云策 WordPress 开发者社区

块编辑器开发文档

ItemGroup

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

概述

ItemGroup 是一个实验性的 WordPress 组件，用于将多个 Item 子组件分组并统一样式。它通过 Context 传递属性，支持边框、圆角、间距和大小等配置。

关键要点

  • ItemGroup 是实验性功能，可能发生重大变更，需谨慎使用。
  • 必须与 Item 子组件配合使用，通过 Context 自动传递 size 等属性。
  • 支持 isBordered、isRounded、isSeparated 和 size 等 props 来定制外观。

代码示例

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

function Example() {
    return (
        <ItemGroup>
            <Item>Code</Item>
            <Item>is</Item>
            <Item>Poetry</Item>
        </ItemGroup>
    );
}

注意事项

  • 由于是实验性功能，不建议在生产环境中使用，以免因更新导致兼容性问题。
  • size prop 未定义时，默认从 Context 继承 medium 值。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

ItemGroup displays a list of Items grouped and styled together.

Usage

ItemGroup should be used in combination with the Item sub-component.

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

function Example() {
    return (
        <ItemGroup>
            <Item>Code</Item>
            <Item>is</Item>
            <Item>Poetry</Item>
        </ItemGroup>
    );
}

Props

isBordered: boolean

Renders borders around each items.

  • Required: No
  • Default: false

isRounded: boolean

Renders with rounded corners.

  • Required: No
  • Default: true

isSeparated: boolean

Renders items individually. Even if isBordered is false, a border in between each item will be still be displayed.

  • Required: No
  • Default: false

size: 'small' | 'medium' | 'large'

Determines the amount of padding within the component.
When not defined, it defaults to the value from the context (which is medium by default).

  • Required: No
  • Default: medium

Context

The Item sub-component is connected to <ItemGroup /> using Context. Therefore, Item receives the size prop from the ItemGroup parent component.

In the following example, the <Item /> will render with a size of small:

import {
    __experimentalItemGroup as ItemGroup,
    __experimentalItem as Item,
} from '@wordpress/components';

const Example = () => (
    <ItemGroup size="small">
        <Item>Item text</Item>
    </ItemGroup>
);