Настройка границ и радиусов

Chakra UI предоставляет мощный и гибкий способ работы с границами и радиусами углов элементов, используя системные свойства и утилиты для быстрого прототипирования и консистентного дизайна.

Свойство border

Свойство border в Chakra UI позволяет задавать ширину, стиль и цвет границы в одной строке:

<Box border="2px solid" borderColor="blue.500">
  Пример границы
</Box>
  • border="2px solid" задаёт толщину и стиль границы.
  • borderColor="blue.500" задаёт цвет границы, используя палитру темы Chakra UI.

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

<Box borderTop="4px dashed" borderRight="2px solid" borderColor="red.400">
  Разные границы для сторон
</Box>

Ключевые свойства для границ:

  • borderWidth — ширина границы (1px, 2px, 0.5rem и т.д.).
  • borderStyle — стиль границы (solid, dashed, dotted, none).
  • borderColor — цвет границы (можно использовать цветовую палитру темы).
  • borderTop, borderBottom, borderLeft, borderRight — индивидуальные границы для каждой стороны.

Радиусы углов (borderRadius)

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

<Box border="1px solid" borderRadius="md" p={4}>
  Скруглённые углы среднего размера
</Box>

Стандартные значения в теме:

  • sm — маленький радиус
  • md — средний радиус
  • lg — большой радиус
  • xl, 2xl — ещё более выраженное скругление
  • full — полностью круглая форма (например, для аватаров)

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

<Box border="1px solid" borderRadius="16px" p={4}>
  Пользовательский радиус 16px
</Box>

Индивидуальные радиусы углов

Chakra UI позволяет задавать скругления для каждого угла отдельно:

  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius

Пример:

<Box
  border="2px solid"
  borderTopLeftRadius="lg"
  borderBottomRightRadius="xl"
  p={4}
>
  Разные радиусы углов
</Box>

Это особенно удобно для создания асимметричных элементов, карточек или кнопок с нестандартной формой.

Использование сокращённых свойств

Для ускорения разработки Chakra UI поддерживает сокращённые свойства:

  • borderX — задаёт границу слева и справа
  • borderY — задаёт границу сверху и снизу

Пример:

<Box borderX="4px solid" borderY="2px dashed" borderColor="green.500" p={4}>
  Горизонтальные и вертикальные границы
</Box>

Интеграция с цветовой палитрой темы

Цвет границы и фона можно задавать через тему Chakra UI. Это позволяет легко поддерживать консистентность интерфейса и использовать динамические значения:

<Box
  border="2px solid"
  borderColor="teal.300"
  borderRadius="xl"
  bg="teal.50"
  p={6}
>
  Тема и границы
</Box>

Здесь teal.300 и teal.50 берутся из палитры темы, что гарантирует гармоничный цветовой контраст.

Динамические и responsive границы

Chakra UI поддерживает адаптивные значения через массивы или объекты:

<Box
  border="2px solid"
  borderColor="purple.400"
  borderRadius={{ base: "sm", md: "lg" }}
  p={4}
>
  Адаптивные радиусы
</Box>
  • base — для всех экранов
  • md — для средних и больших экранов

Можно использовать и сокращённый синтаксис массивов: [sm, md, lg], где каждый элемент соответствует брейкпоинту.

Тени и сочетание с границами

Для создания более выразительных элементов границы можно сочетать с тенью:

<Box
  border="1px solid"
  borderColor="gray.300"
  borderRadius="lg"
  boxShadow="md"
  p={6}
>
  Граница с тенью
</Box>

boxShadow усиливает визуальное разделение элементов, при этом скругление углов остаётся наглядным.

Практические рекомендации

  1. Использовать тему для цветов и размеров — упрощает поддержку UI и обеспечивает консистентность.
  2. Сочетать скругления и тени — улучшает восприятие и добавляет глубину.
  3. Применять сокращённые свойства для боковых границ — ускоряет верстку и делает код читаемым.
  4. Адаптивные радиусы — полезны для мобильных и десктопных интерфейсов.
  5. Комбинировать индивидуальные углы — помогает создавать уникальные компоненты и асимметричные формы.

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

Оглавление