Компонент Divider в библиотеке компонентов WordPress является экспериментальным и используется для визуального разделения групп контента. Он помогает структурировать интерфейс, добавляя горизонтальные или вертикальные линии, которые разделяют элементы.
Подключение компонента
Для использования Divider, импортируйте его из библиотеки компонентов WordPress:
import {
__experimentalDivider as Divider,
__experimentalText as Text,
__experimentalVStack as VStack,
} from '@wordpress/components';
Базовый пример использования
В этом примере компонент Divider добавляет разделительную линию между двумя текстовыми элементами, находящимися в вертикальном стеке VStack.
function Example() {
return (
<VStack spacing={4}>
<Text>Первый блок текста</Text>
<Divider />
<Text>Второй блок текста</Text>
</VStack>
);
}
Описание пропсов
Компонент Divider поддерживает несколько параметров, которые позволяют настроить его внешний вид и расположение.
margin(опциональный)- Тип:
number - Устанавливает общие отступы вдоль линейного измерения (по горизонтали для горизонтального делителя и по вертикали для вертикального).
- Тип:
Пример использования с отступом:
<Divider margin={8} />
marginEnd(опциональный)- Тип:
number - Задает отступ для конца делителя в его текущем направлении (например, правый отступ для горизонтального разделителя). Полезен, когда требуется более точная настройка.
- Тип:
Пример использования с marginEnd:
<Divider marginEnd={12} />
marginStart(опциональный)- Тип:
number - Устанавливает отступ в начале направления делителя (например, левый отступ для горизонтального делителя).
- Тип:
Пример использования с marginStart:
<Divider marginStart={6} />
orientation(опциональный)- Тип:
horizontal | vertical - Определяет ориентацию разделителя. По умолчанию
Dividerгоризонтальный, но можно задатьverticalдля создания вертикального разделителя.
- Тип:
Пример использования с вертикальной ориентацией:
<Divider orientation="vertical" />
Горизонтальный разделитель с отступами
Этот пример демонстрирует горизонтальный Divider с индивидуальными отступами для начала и конца, что позволяет настроить расположение разделителя по ширине контейнера.
function HorizontalDividerExample() {
return (
<VStack spacing={4}>
<Text>Текст сверху</Text>
<Divider marginStart={10} marginEnd={20} />
<Text>Текст снизу</Text>
</VStack>
);
}
Вертикальный разделитель в Flex-контейнере
Чтобы сделать разделитель вертикальным, удобно использовать его внутри HStack (горизонтального стека), где он разделяет два текстовых блока.
import { __experimentalHStack as HStack } from '@wordpress/components';
function VerticalDividerExample() {
return (
<HStack spacing={4} align="stretch">
<Text>Левая колонка</Text>
<Divider orientation="vertical" />
<Text>Правая колонка</Text>
</HStack>
);
}
Пример с настраиваемым размером отступов
В этом примере показано, как можно использовать margin для задания одинакового отступа по обеим сторонам разделителя, чтобы создать больше пространства между элементами.
function CustomMarginDivider() {
return (
<VStack spacing={6}>
<Text>Секция 1</Text>
<Divider margin={16} />
<Text>Секция 2</Text>
</VStack>
);
}
Унаследованные свойства
Компонент Divider наследует все свойства от Separator, что позволяет дополнительно настраивать его внешний вид и поведение.
Заключение
Divider — полезный компонент для улучшения читаемости и структуры интерфейса. С его помощью можно легко добавлять разделительные линии для группировки элементов. Использование параметров margin, orientation, и унаследованных свойств делает Divider гибким и удобным в настройке.