Границы

В Chakra UI границы играют ключевую роль в создании визуальной структуры интерфейса. Библиотека предоставляет удобные свойства для управления стилями границ компонентов, что позволяет быстро задавать толщину, стиль, цвет и радиус без необходимости писать кастомный CSS.

Свойства границ

Chakra UI использует стандартные CSS-свойства для границ, обернутые в удобные пропсы:

  • borderWidth — задаёт толщину границы. Поддерживаются значения thin, medium, thick и числовые значения в пикселях.
  • borderStyle — определяет стиль линии. Основные варианты: solid, dashed, dotted, double, none.
  • borderColor — цвет границы. Chakra UI интегрирован с темами, поэтому можно использовать стандартные цвета, например, gray.200, blue.500.
  • borderRadius — радиус скругления углов. Поддерживаются числовые значения, а также предопределённые размеры: sm, md, lg, xl, full.
  • borderTop, borderBottom, borderLeft, borderRight — позволяют задавать границы для отдельных сторон.

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

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

<Box 
  borderWidth="2px" 
  borderStyle="solid" 
  borderColor="blue.500" 
  borderRadius="md"
  p={4}
>
  Контент с границей
</Box>

Работа с индивидуальными сторонами

Для более гибкого дизайна можно задавать границы по сторонам:

<Box 
  borderTop="4px dashed red" 
  borderBottom="2px solid gray.300" 
  borderLeft="none" 
  borderRight="1px solid black"
  p={4}
>
  Комбинированные границы
</Box>

Такой подход особенно полезен при создании карточек, разделителей или интерактивных элементов с акцентом на отдельные стороны.

Скругления и круглые элементы

Свойство borderRadius позволяет формировать как слегка закруглённые элементы, так и полностью круглые:

<Box 
  w="100px" 
  h="100px" 
  borderRadius="full" 
  bg="teal.400"
/>

Использование full автоматически делает элемент круглым, если ширина и высота одинаковы. Для тонкой настройки можно использовать числовые значения в пикселях:

<Box 
  borderRadius="12px" 
  p={4} 
  border="1px solid"
  borderColor="gray.400"
>
  Скруглённый блок
</Box>

Системные токены и темы

Chakra UI интегрирован с темой, поэтому цвета и размеры границ можно задавать через токены, что обеспечивает единообразие интерфейса. Например:

<Box borderWidth="1px" borderColor="primary.500" borderRadius="lg" />
  • primary.500 берётся из темы приложения.
  • lg для borderRadius соответствует заранее заданной величине в теме.

Использование токенов позволяет легко поддерживать дизайн-систему и изменять стили глобально.

Комбинирование с другими стилями

Границы часто комбинируются с тенями, отступами и фоновой заливкой для создания визуальной глубины:

<Box
  border="2px solid"
  borderColor="gray.200"
  borderRadius="md"
  boxShadow="lg"
  p={6}
  bg="white"
>
  Карточка с границей и тенью
</Box>

Такой подход обеспечивает чёткое разделение блоков интерфейса и визуально структурирует контент.

Адаптивные границы

Chakra UI поддерживает responsive props, что позволяет изменять границы в зависимости от размеров экрана:

<Box
  borderWidth={{ base: "1px", md: "2px", lg: "4px" }}
  borderColor="blue.400"
  borderRadius={{ base: "sm", md: "md", lg: "lg" }}
  p={4}
>
  Адаптивный блок
</Box>

Здесь для маленьких экранов граница тонкая, для больших — более выраженная. Это позволяет создавать гибкие макеты без написания медиазапросов вручную.

Заключение использования границ

Гибкая система пропсов Chakra UI делает работу с границами интуитивной и быстрой. Комбинирование borderWidth, borderStyle, borderColor и borderRadius, а также интеграция с темой и адаптивными свойствами позволяет создавать разнообразные визуальные элементы, соблюдая единый стиль приложения.

Оглавление