项目组

此功能仍处于实验阶段。“Experimental”意味着这是早期实现，可能会发生剧烈且破坏性的更改。

ItemGroup 显示一组分组并统一样式的 Item 项。

用法

ItemGroup 应与 Item 子组件 配合使用。

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

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

属性

isBordered: boolean

在每个项目周围渲染边框。

• 是否必需：否
• 默认值：false

isRounded: boolean

以圆角形式渲染。

• 是否必需：否
• 默认值：true

isSeparated: boolean

单独渲染每个项目。即使 isBordered 为 false，每个项目之间仍会显示分隔线。

• 是否必需：否
• 默认值：false

size: ‘small’ | ‘medium’ | ‘large’

确定组件内部的填充量。
当未定义时，默认为上下文中的值（默认为 medium）。

• 是否必需：否
• 默认值：medium

Context

Item 子组件 通过 Context 与 <ItemGroup /> 连接。因此，Item 从父组件 ItemGroup 接收 size 属性。

在以下示例中，<Item /> 将以 small 的大小渲染：

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

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