Компонент HStack (Horizontal Stack) в WordPress — это экспериментальный элемент, предназначенный для горизонтального расположения дочерних элементов. Данный компонент является частью библиотеки @wordpress/components и может быть полезен при создании интерфейсов с горизонтальным выравниванием, таких как кнопочные панели или строки текста.
Важно: Компонент HStack находится в статусе «экспериментальный». Это означает, что его API может изменяться, что потенциально может приводить к обратимым изменениям.
Основы использования HStack
Компонент HStack позволяет размещать любой контент внутри себя и управлять его выравниванием и распределением.
import {
__experimentalHStack as HStack,
__experimentalText as Text,
} from '@wordpress/components';
function ExampleHStack() {
return (
<HStack>
<Text>Программный</Text>
<Text>Код</Text>
<Text>Эстетика</Text>
</HStack>
);
}
Основные параметры HStack
alignment
- Тип:
HStackAlignment | CSS['alignItems'] - Описание: Управляет выравниванием дочерних элементов относительно основной оси контейнера.Возможные значения:
top: Выравнивает содержимое по верхнему краю.topLeft: Выравнивает содержимое по верхнему левому углу.topRight: Выравнивает содержимое по верхнему правому углу.left: Выравнивает содержимое по левому краю.center: Центрирует содержимое.right: Выравнивает содержимое по правому краю.bottom: Выравнивает содержимое по нижнему краю.bottomLeft: Выравнивает содержимое по нижнему левому углу.bottomRight: Выравнивает содержимое по нижнему правому углу.edge: Равномерно распределяет содержимое по краям контейнера.stretch: Растягивает содержимое по вертикали, чтобы занять всю высоту контейнера.
Пример использования:
<HStack alignment="center">
<Text>Пункт 1</Text>
<Text>Пункт 2</Text>
<Text>Пункт 3</Text>
</HStack>
direction
- Тип:
FlexDirection - Описание: Определяет направление расположения элементов. Значение
rowрасполагает элементы горизонтально, аcolumn— вертикально.
Пример:
<HStack direction="column">
<Text>Элемент 1</Text>
<Text>Элемент 2</Text>
</HStack>
expanded
- Тип:
boolean - Описание: Если значение
true, контейнер расширяется на всю доступную ширину (или высоту, если направление — вертикальное).
Пример:
<HStack expanded>
<Text>Этот контейнер займет всю ширину</Text>
</HStack>
justify
- Тип:
CSS['justifyContent'] - Описание: Горизонтально выравнивает содержимое, если направление — горизонтальное (по умолчанию), и вертикально, если направление — вертикальное.
Пример:
<HStack justify="flex-start">
<Text>Левый элемент</Text>
<Text>Центральный элемент</Text>
<Text>Правый элемент</Text>
</HStack>
spacing
- Тип:
CSS['width'] - Описание: Задает расстояние между элементами.
spacingпредставляет собой множитель для внутренней системы сетки библиотеки (основанной на базовом значении 4px).
Пример:
<HStack spacing={2}>
<Text>Элемент с интервалом</Text>
<Text>Элемент 2</Text>
</HStack>
wrap
- Тип:
boolean - Описание: Определяет, должны ли элементы переноситься на новую строку при нехватке места в контейнере.
Пример:
<HStack wrap>
<Text>Первый элемент</Text>
<Text>Второй элемент</Text>
<Text>Третий элемент</Text>
</HStack>
Использование компонента Spacer в HStack
Компонент Spacer используется для адаптивного заполнения оставшегося пространства в контейнере HStack. Он может быть размещен между элементами, чтобы распределить их по ширине или высоте контейнера.
Пример:
import {
__experimentalHStack as HStack,
__experimentalSpacer as Spacer,
__experimentalText as Text,
} from '@wordpress/components';
function ExampleWithSpacer() {
return (
<HStack>
<Text>Текст 1</Text>
<Spacer>
<Text>Текст 2</Text>
</Spacer>
<Text>Текст 3</Text>
</HStack>
);
}
Можно также использовать Spacer без оборачивания внутри элемента Text, чтобы равномерно распределить элементы.
<HStack>
<Text>Элемент 1</Text>
<Spacer />
<Text>Элемент 2</Text>
<Text>Элемент 3</Text>
</HStack>
Заключение
Компонент HStack в WordPress предоставляет гибкие возможности для горизонтального размещения элементов. Благодаря параметрам alignment, direction, expanded, justify, spacing, wrap и компоненту Spacer, вы можете управлять поведением и выравниванием элементов в горизонтальных стеках, что делает его мощным инструментом для построения интерфейсов.