Компонент Elevation является экспериментальной функцией в WordPress. Он предназначен для отображения теней, добавляя ощущение глубины к элементам интерфейса, и настраивается через систему стилей WordPress. Этот компонент гибко управляется параметрами, такими как размер тени, интерактивность, радиус границы и смещение.
Примечание: Так как компонент
Elevationпока находится на экспериментальной стадии, он может претерпеть значительные изменения в будущем.
Использование компонента Elevation
Для начала импортируем компонент Elevation и другие экспериментальные компоненты, такие как Surface и Text, которые часто используются совместно с Elevation.
import {
__experimentalElevation as Elevation,
__experimentalSurface as Surface,
__experimentalText as Text,
} from '@wordpress/components';
function ElevationExample() {
return (
<Surface>
<Text>Code is Poetry</Text>
<Elevation value={5} />
</Surface>
);
}
В данном примере Elevation с параметром value={5} добавляет тень к контейнеру, создавая эффект глубины.
Описание Props для Elevation
Компонент Elevation поддерживает множество параметров, позволяющих настраивать внешний вид и поведение тени:
1. value: number
Определяет размер тени. Этот параметр основан на системе стилей WordPress и задает «глубину» тени: чем выше значение, тем более заметна тень.
- Обязательный: Нет
- По умолчанию:
0
<Elevation value={10} />2. active: number
Задает размер тени, когда элемент находится в активном состоянии (например, при клике). Это свойство применяется, если включена интерактивность через isInteractive.
- Обязательный: Нет
<Elevation value={5} active={8} />3. focus: number
Задает размер тени, когда элемент находится в фокусе (например, после нажатия клавиши Tab). Работает только при isInteractive.
- Обязательный: Нет
<Elevation value={5} focus={12} />4. hover: number
Определяет размер тени при наведении на элемент курсора. Также применяется только при isInteractive.
- Обязательный: Нет
<Elevation value={5} hover={10} />5. isInteractive: boolean
Если значение true, то Elevation будет автоматически изменять тень при различных интерактивных состояниях (активное состояние, фокус и наведение). В сочетании с active, focus, и hover этот параметр помогает создать более динамичный эффект глубины.
- Обязательный: Нет
- По умолчанию:
false
<Elevation value={5} isInteractive />6. borderRadius: CSSProperties[‘borderRadius’]
Задает радиус скругления тени, чтобы соответствовать форме элемента.
- Обязательный: Нет
- По умолчанию:
inherit
<Elevation value={5} borderRadius="8px" />7. offset: number
Определяет смещение тени относительно элемента. Используется для настройки тени в зависимости от положения элемента.
- Обязательный: Нет
- По умолчанию:
0
<Elevation value={5} offset={2} />Продвинутый пример с интерактивными тенями
В этом примере компонент Elevation демонстрирует интерактивные тени, которые изменяются в зависимости от состояния (наведение, активное состояние, фокус). Это делает интерфейс более динамичным и визуально приятным.
import {
__experimentalElevation as Elevation,
__experimentalSurface as Surface,
__experimentalText as Text,
} from '@wordpress/components';
function InteractiveElevationExample() {
return (
<Surface style={{ padding: '20px', borderRadius: '10px', backgroundColor: '#fff' }}>
<Text>Interactive Shadow</Text>
<Elevation
value={3}
active={6}
focus={8}
hover={5}
isInteractive
borderRadius="10px"
offset={4}
/>
</Surface>
);
}
В этом примере:
- value задает основную тень при отсутствии взаимодействия.
- active, focus, и hover задают размеры тени в активном, фокусированном и наведенном состояниях соответственно.
- isInteractive позволяет тени изменяться при взаимодействии с элементом.
- borderRadius и offset контролируют скругление и смещение тени, чтобы она гармонично сочеталась с элементом.
Пример с динамическим значением тени
В этом примере используется кнопка для изменения размера тени динамически, показывая, как Elevation может использоваться в интерактивных приложениях с изменяющимися параметрами.
import { useState } from 'react';
import {
__experimentalElevation as Elevation,
__experimentalSurface as Surface,
__experimentalText as Text,
Button,
} from '@wordpress/components';
function DynamicElevationExample() {
const [elevationValue, setElevationValue] = useState(5);
const increaseShadow = () => setElevationValue(elevationValue + 2);
const decreaseShadow = () => setElevationValue(elevationValue > 0 ? elevationValue - 2 : 0);
return (
<Surface style={{ padding: '20px', borderRadius: '10px', backgroundColor: '#f0f0f0' }}>
<Text>Adjustable Shadow Depth</Text>
<Elevation value={elevationValue} borderRadius="10px" />
<div style={{ marginTop: '10px' }}>
<Button onClick={increaseShadow}>Increase Shadow</Button>
<Button onClick={decreaseShadow} style={{ marginLeft: '5px' }}>Decrease Shadow</Button>
</div>
</Surface>
);
}
В этом примере:
- Кнопки «Increase Shadow» и «Decrease Shadow» изменяют значение
elevationValue. - Тень изменяется динамически на основе состояния
elevationValue, позволяя пользователю контролировать глубину тени в реальном времени.
Заключение
Компонент Elevation является мощным инструментом для управления тенями в WordPress, позволяя добавить глубину и акцент к элементам. Благодаря множеству настраиваемых параметров он легко адаптируется под различные задачи. Интерактивные тени, изменяющиеся при наведении, фокусе и клике, значительно улучшают пользовательский интерфейс, делая его более отзывчивым и современным.