Компонент ItemGroup в WordPress является экспериментальным и позволяет отображать список элементов, объединенных и стилизованных в одной группе. Он обычно используется с дочерним компонентом Item, который наследует стили и параметры от ItemGroup через контекст. В этом руководстве мы рассмотрим основные параметры и возможности ItemGroup, а также приведем уникальные примеры для иллюстрации.
Импорт компонентов ItemGroup и Item
Так как ItemGroup и Item являются экспериментальными, их следует импортировать с префиксом __experimental.
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
} from '@wordpress/components';
Пример использования ItemGroup
Для начала создадим базовый пример с несколькими элементами Item, сгруппированными в ItemGroup.
function MyExample() {
return (
<ItemGroup>
<Item>Элемент 1</Item>
<Item>Элемент 2</Item>
<Item>Элемент 3</Item>
</ItemGroup>
);
}
Этот простой пример отображает три элемента, сгруппированных вместе без дополнительных стилей. Теперь рассмотрим все параметры компонента ItemGroup.
Параметры компонента ItemGroup
Компонент ItemGroup поддерживает несколько полезных параметров, позволяющих настраивать отображение и стиль группы элементов. Рассмотрим их подробно:
- isBordered
Добавляет границы вокруг каждого элемента в группе. Полезно, если вы хотите четко выделить каждый элемент визуально.- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
<ItemGroup isBordered={true}>
<Item>Элемент с границей 1</Item>
<Item>Элемент с границей 2</Item>
</ItemGroup>
- isRounded
Делает углы элементов закругленными. Параметр по умолчанию включен, что придает компоненту более мягкий и современный вид.- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
true
- Тип:
<ItemGroup isRounded={true}>
<Item>Закругленный элемент 1</Item>
<Item>Закругленный элемент 2</Item>
</ItemGroup>
- isSeparated
Отображает элементы по отдельности, добавляя разделительную границу между ними, даже еслиisBorderedустановлен вfalse. Полезно для создания эффекта списка с разделителями.- Тип:
Boolean - Обязательный: Нет
- Значение по умолчанию:
false
- Тип:
<ItemGroup isSeparated={true}>
<Item>Элемент 1 с разделителем</Item>
<Item>Элемент 2 с разделителем</Item>
</ItemGroup>- size
Определяет внутренние отступы (padding) элементов. Поддерживаемые значения:small,medium,large. Если размер не указан, компонент использует значение из контекста, которое по умолчанию равноmedium.- Тип:
String - Обязательный: Нет
- Значение по умолчанию:
medium
- Тип:
<ItemGroup size="large">
<Item>Крупный элемент 1</Item>
<Item>Крупный элемент 2</Item>
</ItemGroup>
Связь с дочерними компонентами через Context
Компонент Item автоматически получает параметры от ItemGroup через контекст, поэтому нет необходимости передавать их вручную каждому элементу. Например, если вы задаете size для ItemGroup, все дочерние элементы Item будут отображаться с тем же размером.
<ItemGroup size="small">
<Item>Маленький элемент</Item>
<Item>Другой маленький элемент</Item>
</ItemGroup>
В этом примере оба элемента будут отображены с небольшим внутренним отступом.
Пример 1: Группа элементов с границами и закругленными углами
function BorderedRoundedExample() {
return (
<ItemGroup isBordered={true} isRounded={true} size="medium">
<Item>Элемент с границей и округл. углами 1</Item>
<Item>Элемент с границей и округл. углами 2</Item>
</ItemGroup>
);
}
Здесь каждый элемент в группе будет отображен с границами и закругленными углами, что создаст аккуратный, визуально выделенный список.
Пример 2: Список с разделителями и малым размером элементов
function SeparatedSmallExample() {
return (
<ItemGroup isSeparated={true} size="small">
<Item>Элемент с разделителем 1</Item>
<Item>Элемент с разделителем 2</Item>
<Item>Элемент с разделителем 3</Item>
</ItemGroup>
);
}
В этом примере добавлены разделительные линии между элементами и уменьшенный размер, что делает группу компактной.
Пример 3: Группа с отключенными границами и округл. углами на большом размере
function LargeRoundedExample() {
return (
<ItemGroup isRounded={false} isBordered={false} size="large">
<Item>Без границ 1</Item>
<Item>Без границ 2</Item>
</ItemGroup>
);
}
Здесь мы отключаем границы и закругленные углы, но используем большой размер для элементов, создавая упрощенный, но выразительный вид.
Заключение
Компонент ItemGroup в WordPress предоставляет удобные возможности для создания списков элементов, объединенных визуально и стилистически. Используя различные параметры, такие как isBordered, isRounded, isSeparated, и size, вы можете легко настроить внешний вид группы элементов, чтобы она соответствовала вашим требованиям. Благодаря использованию контекста дочерние элементы автоматически наследуют параметры от ItemGroup, что делает работу с компонентом еще проще.