Компонент AlignmentMatrixControl в WordPress используется для управления выравниванием контента как по горизонтали, так и по вертикали. Он предоставляет интерактивную матрицу, которая позволяет пользователям задавать точные параметры выравнивания. Этот компонент подходит для настройки выравнивания в пользовательских интерфейсах и может использоваться, например, для создания редакторов или кастомных элементов в блоках.
Важно:
AlignmentMatrixControl— экспериментальный компонент и может изменяться в будущем.
Основное назначение компонента AlignmentMatrixControl
Компонент AlignmentMatrixControl удобен для визуального управления выравниванием, предоставляя пользователю выбор из стандартных положений выравнивания (верхний, нижний, центральный и угловые положения). Благодаря интуитивному интерфейсу матрицы компонент позволяет быстро изменить ориентацию и позиционирование элементов в макете.
Пример использования компонента AlignmentMatrixControl
Рассмотрим базовый пример с использованием AlignmentMatrixControl для настройки выравнивания контента. Мы будем использовать состояние alignment, чтобы отслеживать выбранное значение и изменять его через функцию setAlignment.
import { AlignmentMatrixControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
function ExampleAlignmentControl() {
const [alignment, setAlignment] = useState('center center');
return (
<AlignmentMatrixControl
value={alignment}
onChange={setAlignment}
label="Настройка выравнивания"
/>
);
}
Пояснение к примеру
value: Указывает текущее значение выравнивания (например,'center center'). Это значение контролирует позицию в компоненте.onChange: Функция, которая вызывается при изменении выравнивания. В примере используетсяsetAlignment, чтобы обновлять значениеalignment.label: Добавляет доступное название для компонента, которое будет использовано в качествеaria-label.
Свойства (Props) компонента AlignmentMatrixControl
AlignmentMatrixControl поддерживает несколько параметров, которые позволяют гибко управлять его настройками и поведением. Рассмотрим каждый параметр.
1. defaultValue
Тип: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
Описание: Устанавливает значение по умолчанию для выравнивания. Если параметр не указан, выравнивание будет установлено в центр матрицы ('center center').
<AlignmentMatrixControl
defaultValue="top left"
onChange={(newValue) => console.log('Новое значение:', newValue)}
/>
В этом примере компонент изначально будет выровнен по верхнему левому углу.
2. label
Тип: string
Описание: Задает доступное название для компонента, которое будет использовано в качестве aria-label. Это полезно для улучшения доступности, позволяя пользователям экранных считывателей понимать назначение компонента.
<AlignmentMatrixControl
label="Выбор выравнивания"
onChange={(newValue) => console.log('Выбрано новое выравнивание:', newValue)}
/>
Здесь label указывает название для компонента, которое улучшает доступность для пользователей с особыми потребностями.
3. onChange
Тип: (newValue: AlignmentMatrixControlValue) => void
Описание: Функция, которая вызывается при изменении значения выравнивания. Эта функция принимает новое значение выравнивания и позволяет использовать его для обновления состояния.
<AlignmentMatrixControl
value="center center"
onChange={(newAlignment) => alert(`Новое выравнивание: ${newAlignment}`)}
/>
В этом примере при изменении выравнивания пользователь увидит всплывающее окно с новым значением выравнивания.
4. value
Тип: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
Описание: Указывает текущее значение выравнивания. Это свойство используется для контроля состояния компонента. Значение value определяет, какое выравнивание будет отображаться в интерфейсе компонента.
const ExampleAlignmentControl = () => {
const [alignment, setAlignment] = useState('bottom center');
return (
<AlignmentMatrixControl
value={alignment}
onChange={setAlignment}
/>
);
};
В этом примере AlignmentMatrixControl будет начинать с выравнивания по нижнему центру.
5. width
Тип: number
Описание: Устанавливает ширину компонента. Если параметр не указан, ширина по умолчанию равна 92.
<AlignmentMatrixControl
value="center left"
onChange={(alignment) => console.log(alignment)}
width={120}
/>
Здесь компонент будет иметь ширину 120, что полезно для настройки размера компонента в зависимости от макета.
Подкомпоненты: AlignmentMatrixControl.Icon
Компонент AlignmentMatrixControl имеет дочерний элемент AlignmentMatrixControl.Icon, который отвечает за отображение значка, связанного с выравниванием.
Свойства (Props) компонента AlignmentMatrixControl.Icon
1. disablePointerEvents
Тип: boolean
Описание: Если установлено значение true, отключает события указателя на значке.
<AlignmentMatrixControl.Icon
value="top right"
disablePointerEvents={true}
/>
В этом примере значок выравнивания будет отображаться, но не будет реагировать на события указателя.
2. value
Тип: "center" | "top left" | "top center" | "top right" | "center left" | "center center" | "center right" | "bottom left" | "bottom center" | "bottom right"
Описание: Указывает текущее значение выравнивания для значка. Значок будет визуально представлять это выравнивание.
<AlignmentMatrixControl.Icon
value="bottom right"
/>
Значок будет отображать выравнивание по нижнему правому углу.
Заключение
Компонент AlignmentMatrixControl предоставляет удобный и интуитивный способ управления выравниванием элементов в WordPress, особенно полезный для создания сложных интерфейсов. Благодаря поддержке множества параметров, таких как label, defaultValue, width, а также дочернего компонента Icon, его можно легко адаптировать под любые нужды разработки.