В WordPress, компонент Composite предоставляет интерфейс для создания сложных, настраиваемых элементов, которые управляют фокусом и обеспечивают доступность. Этот компонент использует WAI-ARIA Composite Role для организации элементов в группы и позволяет пользователям удобно перемещаться по элементам с помощью клавиш стрелок.
Основные особенности компонента Composite
Компонент Composite состоит из нескольких вложенных элементов, таких как группы и элементы, которые можно навигировать с помощью клавиш стрелок. Он поддерживает различные функции, такие как цикличность фокуса, типовой ввод и многое другое.
Как использовать компонент Composite
Для использования компонента Composite в WordPress, сначала необходимо импортировать его из пакета @wordpress/components:
import { Composite } from '@wordpress/components';
Затем вы можете создать структуру компонента, например:
<Composite>
<Composite.Group>
<Composite.GroupLabel>Основная группа</Composite.GroupLabel>
<Composite.Item>Элемент 1</Composite.Item>
<Composite.Item>Элемент 2</Composite.Item>
<Composite.Item>Элемент 3</Composite.Item>
</Composite.Group>
</Composite>
Основные компоненты в Composite
- Composite — главный компонент, который создает виджет и управляет фокусом на его элементах.
- Composite.Group — представляет группу элементов, которая может содержать несколько Composite.Item.
- Composite.GroupLabel — метка для группы элементов, которая обеспечивает доступность для пользователей.
- Composite.Item — элемент внутри группы, который может быть активирован или выбран пользователем.
- Composite.Row — создает строку для размещения элементов, что позволяет сделать виджет двухмерным.
- Composite.Hover — позволяет элементу получать фокус при наведении мыши.
Пример использования Composite с настройкой фокуса
В этом примере мы создаем виджет с элементами, которые можно навигировать с помощью клавиш стрелок. Также добавлена цикличность фокуса, что позволяет перемещаться с последнего элемента на первый:
import { useState } from 'react';
import { Composite } from '@wordpress/components';
function MyComposite() {
const [activeId, setActiveId] = useState(null);
return (
<Composite
activeId={activeId}
setActiveId={setActiveId}
focusLoop={true} // Цикличность фокуса
orientation="vertical" // Ориентация вертикальная
>
<Composite.Group>
<Composite.GroupLabel>Группа элементов</Composite.GroupLabel>
<Composite.Item>Элемент 1</Composite.Item>
<Composite.Item>Элемент 2</Composite.Item>
<Composite.Item>Элемент 3</Composite.Item>
</Composite.Group>
</Composite>
);
}
Описание основных пропсов
1. activeId
- Тип:
string | null - Описание: Определяет активный элемент в виджете. Когда элемент активен, он получает фокус. Если это
null, фокус находится на самом виджете.
activeId="item-1"
2. defaultActiveId
- Тип:
string | null - Описание: Идентификатор элемента, который должен быть активен по умолчанию. Если не указан, активным будет первый доступный элемент.
defaultActiveId="item-2"3. setActiveId
- Тип:
function - Описание: Функция, которая вызывается при изменении активного элемента.
setActiveId(id => { console.log(id); })
4. focusLoop
- Тип:
boolean | 'horizontal' | 'vertical' | 'both' - Описание: Управляет поведением фокуса, когда пользователь достигает последнего элемента. Он может быть цикличным по горизонтали, вертикали или обоим направлениям.
focusLoop="both"
5. focusWrap
- Тип:
boolean - Описание: Работает только для двухмерных виджетов. Если активировано, фокус будет переходить с последнего элемента текущей строки или столбца на первый элемент следующей строки или столбца.
focusWrap={true}
6. virtualFocus
- Тип:
boolean - Описание: Если включено, фокус остается на родительском элементе Composite, но фокус виртуально передается на дочерние элементы.
virtualFocus={true}
7. orientation
- Тип:
'horizontal' | 'vertical' | 'both' - Описание: Определяет ориентацию виджета. Это определяет, какие клавиши стрелок можно использовать для перемещения фокуса.
orientation="horizontal"
Пример с двухмерным виджетом
В следующем примере мы создаем виджет с элементами в виде сетки (двумерный виджет), где используется цикличность фокуса и возможность перемещения по строкам и столбцам.
<Composite focusLoop="both">
<Composite.Row>
<Composite.Item>Элемент 1</Composite.Item>
<Composite.Item>Элемент 2</Composite.Item>
</Composite.Row>
<Composite.Row>
<Composite.Item>Элемент 3</Composite.Item>
<Composite.Item>Элемент 4</Composite.Item>
</Composite.Row>
</Composite>
Заключение
Компонент Composite в WordPress представляет собой мощный инструмент для создания доступных и интерактивных интерфейсов. С его помощью можно легко организовать элементы управления, которые поддерживают фокусировку и навигацию с помощью клавиш стрелок. Его можно настроить для работы в одномерном или двухмерном режиме, а также для работы с фокусом, который может быть цикличным или виртуальным.
Если вам нужно создать сложный виджет с несколькими группами элементов и настройками фокуса, компонент Composite предоставит все необходимые инструменты для удобного и доступного взаимодействия с пользователями.