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