Компонент ZStack в WordPress — это экспериментальная функция, предназначенная для управления наложением элементов по оси Z, позволяя создавать эффект многослойности. Этот компонент полезен для создания сложных визуальных слоев, например, когда элементы должны перекрывать друг друга.
Основы использования ZStack
Ниже приведен пример использования компонента ZStack, где мы создадим три изображения, расположенные по оси Z с наложением и смещением.
Пример базового использования ZStack
import { __experimentalZStack as ZStack } from '@wordpress/components';
function ExampleZStack() {
return (
<ZStack offset={20} isLayered>
<img src="image1.jpg" alt="Первое изображение" />
<img src="image2.jpg" alt="Второе изображение" />
<img src="image3.jpg" alt="Третье изображение" />
</ZStack>
);
}
В этом примере три изображения будут наложены друг на друга с отступом 20px. Верхнее изображение будет иметь самый высокий z-index, а нижнее — самый низкий. Смещение позволяет добиться эффекта ступенчатого наложения.
Свойства компонента ZStack
1. isLayered
- Тип:
boolean - Описание: Определяет, будет ли применено наложение элементов друг на друга. Если установлено значение
true, элементы будут расположены в порядке наложения, с первым элементом, имеющим самый высокийz-index. - По умолчанию:
true
<ZStack isLayered={true}>
<div>Слой 1</div>
<div>Слой 2</div>
<div>Слой 3</div>
</ZStack>
2. isReversed
- Тип:
boolean - Описание: Инвертирует порядок слоев. Если установлено значение
true, последний элемент будет находиться на верхнем слое, а первый — на нижнем. - По умолчанию:
false
<ZStack isLayered={true} isReversed={true}>
<div>Слой 1</div>
<div>Слой 2</div>
<div>Слой 3</div>
</ZStack>
3. offset
- Тип:
number - Описание: Задает расстояние между элементами по оси Z. Значение смещения автоматически инвертируется при переключении с LTR на RTL.
- По умолчанию:
0
<ZStack offset={15}>
<div>Элемент 1</div>
<div>Элемент 2</div>
<div>Элемент 3</div>
</ZStack>
- Смещение в
15pxсоздаст равномерное расстояние между слоями, придавая эффект «лестницы».
4. children
- Тип:
ReactNode - Описание: Элементы, которые будут находиться внутри
ZStack. - Обязательный параметр
Пример с наложением текста и изображений
import { __experimentalZStack as ZStack } from '@wordpress/components';
function TextImageZStack() {
return (
<ZStack offset={10} isLayered={true}>
<div style={{ background: 'rgba(0, 0, 0, 0.5)', color: '#fff', padding: '20px' }}>
Заголовок
</div>
<img src="background.jpg" alt="Фоновое изображение" />
<p>Текст на изображении для улучшенной читаемости</p>
</ZStack>
);
}
В этом примере текст и изображение накладываются с использованием ZStack, чтобы создать эффект наложения заголовка и фона.
Пример с инвертированным порядком слоев
function ReverseLayerExample() {
return (
<ZStack offset={25} isLayered={true} isReversed={true}>
<img src="bottom-layer.jpg" alt="Нижний слой" />
<img src="middle-layer.jpg" alt="Средний слой" />
<img src="top-layer.jpg" alt="Верхний слой" />
</ZStack>
);
}
Здесь активирован isReversed, поэтому изображение «top-layer» окажется на нижнем слое, а «bottom-layer» — на верхнем.
Заключение
Компонент ZStack предоставляет гибкость при работе с многослойными элементами, позволяя легко управлять наложением и смещением. Использование ZStack значительно упрощает создание сложных многослойных композиций и анимаций.