Компонент Item в WordPress, являясь экспериментальным, используется вместе с компонентом ItemGroup для создания списка элементов, сгруппированных и стилизованных вместе. Компонент Item наследует настройки от родительского компонента ItemGroup через контекст, что позволяет гибко настраивать внешний вид и поведение. В этой статье мы рассмотрим все доступные параметры Item, а также приведем уникальные примеры его использования.
Импорт компонентов Item и ItemGroup
Так как Item и ItemGroup являются экспериментальными, их нужно импортировать с префиксом __experimental.
import {
__experimentalItemGroup as ItemGroup,
__experimentalItem as Item,
} from '@wordpress/components';
Пример базового использования Item
Для начала создадим базовый пример, в котором компонент Item используется внутри ItemGroup, отображая несколько элементов в одной стилизованной группе.
function MyBasicExample() {
return (
<ItemGroup>
<Item>Элемент 1</Item>
<Item>Элемент 2</Item>
<Item>Элемент 3</Item>
</ItemGroup>
);
}
Параметры компонента Item
Компонент Item имеет несколько параметров, которые помогают настроить его внешний вид и поведение. Рассмотрим их по очереди:
- onClick
Обработчик событий для кликов. Если параметр определен,Itemбудет отображаться как кнопка, что позволяет легко обработать событие нажатия.- Тип:
React.MouseEventHandler<HTMLDivElement> - Обязательный: Нет
- Тип:
function ClickableExample() {
const handleClick = () => {
alert("Элемент был нажат!");
};
return (
<ItemGroup>
<Item onClick={handleClick}>Нажми меня</Item>
<Item>Другой элемент</Item>
</ItemGroup>
);
}
- size
Определяет внутренний отступ (padding) внутри элемента. Поддерживаемые значения:small,medium,large. Если параметрsizeне указан, компонент будет использовать значение изItemGroup, которое по умолчанию равноmedium.- Тип:
String - Обязательный: Нет
- Значение по умолчанию:
medium
- Тип:
<ItemGroup size="large">
<Item size="small">Маленький элемент</Item>
<Item size="medium">Средний элемент</Item>
<Item size="large">Большой элемент</Item>
</ItemGroup>
Контекст и наследование параметров от ItemGroup
Компонент Item автоматически наследует параметры, заданные в ItemGroup, через контекст. Это упрощает настройку для всех дочерних элементов, особенно когда требуется изменить параметр size или другие свойства для всех элементов сразу.
Пример с наследованием параметра size от ItemGroup
В этом примере мы задаем size="small" для ItemGroup, и все дочерние элементы Item автоматически унаследуют этот размер.
<ItemGroup size="small">
<Item>Маленький элемент 1</Item>
<Item>Маленький элемент 2</Item>
</ItemGroup>
Пример 1: Список элементов с кликабельными и некликабельными элементами
Этот пример демонстрирует использование параметра onClick для создания кликабельного элемента, а также простых статических элементов.
function InteractiveExample() {
const handleItemClick = () => {
console.log("Элемент был нажат!");
};
return (
<ItemGroup>
<Item onClick={handleItemClick}>Кликабельный элемент</Item>
<Item>Статический элемент</Item>
<Item onClick={handleItemClick}>Еще один кликабельный элемент</Item>
</ItemGroup>
);
}
При клике на любой из элементов с onClick будет выведено сообщение в консоль.
Пример 2: Группа элементов с разными размерами
Здесь мы создаем ItemGroup, внутри которого каждый Item имеет индивидуальный размер (small, medium, large), несмотря на то, что ItemGroup задан с размером medium.
function MixedSizeExample() {
return (
<ItemGroup size="medium">
<Item size="small">Маленький элемент</Item>
<Item size="medium">Средний элемент</Item>
<Item size="large">Большой элемент</Item>
</ItemGroup>
);
}
Каждый элемент отображается с разным размером отступов, независимо от общего размера, заданного для ItemGroup.
Пример 3: Динамическая работа с кликабельными элементами
В этом примере мы добавляем обработку кликов для каждого Item с выводом текста элемента в alert. Это полезно для создания интерактивных списков.
function DynamicClickExample() {
const handleClick = (text) => {
alert(`Вы нажали на: ${text}`);
};
return (
<ItemGroup>
<Item onClick={() => handleClick("Элемент 1")}>Элемент 1</Item>
<Item onClick={() => handleClick("Элемент 2")}>Элемент 2</Item>
<Item onClick={() => handleClick("Элемент 3")}>Элемент 3</Item>
</ItemGroup>
);
}
При нажатии на каждый элемент будет показано сообщение с его текстом, что делает интерфейс более интерактивным и отзывчивым.
Заключение
Компонент Item в WordPress является мощным и гибким инструментом для отображения сгруппированных элементов, особенно в сочетании с ItemGroup. Используя параметры, такие как onClick и size, вы можете легко настроить поведение и внешний вид каждого элемента. Благодаря наследованию параметров через контекст от ItemGroup, настройка дочерних элементов становится удобной и эффективной.