Настройка теней

Chakra UI предоставляет мощные и гибкие средства для работы с тенями элементов интерфейса. Система тени (shadows) в Chakra UI основана на предопределённых стилях, которые можно легко расширять и настраивать под потребности проекта. Тени применяются через свойство boxShadow, которое доступно почти для всех компонентов.

Типы теней

Chakra UI использует несколько категорий теней:

  1. sm, md, lg, xl — стандартные предустановленные размеры:

    • sm — маленькая тень, подходит для лёгких элементов, таких как кнопки и карточки.
    • md — средняя тень, чаще всего применяется для карточек и контейнеров.
    • lg — крупная тень, создаёт более выраженный эффект подъёма.
    • xl — максимальная тень, используется для модальных окон и всплывающих элементов.

Пример использования:

<Box boxShadow="md" p={5} rounded="md" bg="white">
  Средняя тень
</Box>
  1. outline — особый вид тени, который создаёт контурный эффект вокруг элемента. Часто применяется для фокусировки на элементах формы:
<Input placeholder="Введите текст" boxShadow="outline" />
  1. inner — внутренняя тень, создающая эффект вдавленного элемента:
<Box boxShadow="inner" p={5} bg="gray.100">
  Внутренняя тень
</Box>

Кастомизация теней

Chakra UI позволяет создавать собственные стили теней через тему. В файле theme.js можно добавить новые значения в объект shadows:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  shadows: {
    customLight: "0 2px 8px rgba(0, 0, 0, 0.1)",
    customDark: "0 4px 16px rgba(0, 0, 0, 0.3)"
  }
});

export default theme;

После этого новые тени доступны через boxShadow:

<Box boxShadow="customLight" p={5} bg="white">
  Светлая кастомная тень
</Box>

Адаптация теней под тему

Тени можно динамически изменять в зависимости от цветовой схемы приложения. Chakra UI поддерживает тёмную и светлую тему, что позволяет автоматически менять интенсивность тени:

import { useColorModeValue } from "@chakra-ui/react";

const shadow = useColorModeValue("sm", "lg");

<Box boxShadow={shadow} p={5} bg="white">
  Тень адаптивная к теме
</Box>

Использование теней с компонентами

Некоторые компоненты Chakra UI имеют предустановленные тени:

  • Card — можно использовать через boxShadow или наследовать из темы.
  • Modal — автоматическая тень задаётся при открытии окна.
  • Popover и Tooltip — поддерживают лёгкие тени, которые настраиваются через проп boxShadow.

Пример:

<ModalContent boxShadow="xl">
  <ModalHeader>Заголовок</ModalHeader>
  <ModalBody>Содержимое модального окна</ModalBody>
</ModalContent>

Технические советы по настройке

  • Соблюдение визуальной иерархии: лёгкие тени для мелких элементов, крупные — для модальных окон и всплывающих слоёв.
  • Оптимизация производительности: слишком сложные тени могут замедлять рендеринг на слабых устройствах. Предпочтительно использовать rgba-тени вместо фильтров.
  • Комбинация с цветами: тени на тёмном фоне могут быть едва заметны; следует корректировать прозрачность и цвет.

Поддержка кастомных эффектов

Chakra UI позволяет комбинировать несколько теней через строку, разделённую запятыми:

<Box boxShadow="0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2)" p={5} bg="white">
  Комбинированная тень
</Box>

Это даёт возможность создавать сложные эффекты подъёма и глубины, которые визуально приближаются к дизайнам из Figma или Sketch.

Применение переходов

Для плавного изменения теней при наведении удобно использовать transition:

<Box
  boxShadow="md"
  _hover={{ boxShadow: "xl" }}
  transition="box-shadow 0.3s ease"
  p={5}
  bg="white"
>
  Hover эффект с тенью
</Box>

Заключение по практическим аспектам

Тени в Chakra UI — это не только декоративный элемент, но и инструмент создания визуальной иерархии и интерактивности интерфейса. Комбинирование предустановленных и кастомных теней, использование адаптации к цветовой теме и плавных переходов позволяет создавать современные и профессиональные UI.

Оглавление