Настройка отступов и размеров

Chakra UI предоставляет мощный и интуитивный механизм для управления отступами (spacing) и размерами (sizes) компонентов, позволяя создавать адаптивный и согласованный дизайн без необходимости вручную писать CSS.

Система отступов

В Chakra UI используются пропсы m, mt, mb, ml, mr, mx, my для управления внешними отступами (margin) и p, pt, pb, pl, pr, px, py для внутренних отступов (padding).

  • Примеры использования:
<Box m={4} p={6} bg="gray.100">
  Контент с внешним отступом 4 и внутренним 6
</Box>

<Box mt={2} mb={4} px={3} py={5} bg="blue.100">
  Верхний отступ 2, нижний 4, горизонтальный 3, вертикальный 5
</Box>

  • Обозначения:

    • m – margin вокруг всего элемента
    • mt, mb, ml, mr – margin-top, bottom, left, right
    • mx, my – горизонтальные и вертикальные margin
    • p – padding вокруг всего элемента
    • pt, pb, pl, pr – padding-top, bottom, left, right
    • px, py – горизонтальные и вертикальные padding

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

<Box p={[2, 4, 6]} bg="green.100">
  Padding изменяется в зависимости от ширины экрана
</Box>

В этом примере:

  • 2 для маленьких экранов
  • 4 для средних
  • 6 для больших

Работа с размерами компонентов

Chakra UI предоставляет унифицированные пропсы для размеров: w (width), h (height), minW, maxW, minH, maxH.

  • Примеры использования:
<Box w="200px" h="100px" bg="red.200">
  Фиксированная ширина и высота
</Box>

<Box maxW="400px" minW="200px" h="auto" bg="yellow.200">
  Минимальная и максимальная ширина
</Box>

  • Сокращенные обозначения:

    • w = width
    • h = height
    • minW = min-width
    • maxW = max-width
    • minH = min-height
    • maxH = max-height

Также поддерживаются значения в процентах и единицах rem, em, px, что позволяет легко создавать гибкие макеты.

Использование scale из темы

Chakra UI использует тематическую шкалу (theme scale) для единообразных отступов и размеров. Это позволяет поддерживать согласованность дизайна на всем проекте.

  • Пример масштабирования через theme:
<Box p={theme => theme.space[8]} w={theme => theme.sizes[64]} bg="purple.100">
  Использование масштабов отступов и размеров из темы
</Box>

  • Значения scale по умолчанию:

    • space: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20...
    • sizes: xs, sm, md, lg, xl, 2xl, 3xl...

Это обеспечивает единообразное визуальное представление компонентов, облегчает поддержку и масштабирование интерфейса.

Адаптивные размеры и отступы

Chakra UI позволяет задавать размеры и отступы в зависимости от ширины экрана с помощью массивов или объектов:

<Box
  w={["100%", "50%", "25%"]}
  p={{ base: 2, md: 4, lg: 6 }}
  bg="teal.100"
>
  Адаптивная ширина и padding
</Box>
  • base – для мобильных устройств
  • md – для планшетов
  • lg – для десктопов

Массивы и объекты можно комбинировать для гибкого управления layout.

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

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

<Box
  w="300px"
  h="150px"
  p={5}
  m={4}
  bg="orange.100"
  borderRadius="md"
  boxShadow="lg"
>
  Комбинация padding, margin, размеров и декоративных стилей
</Box>
  • borderRadius и boxShadow работают вместе с отступами и размерами
  • Позволяет создавать карточки, кнопки и панели с единообразным дизайном

Практические советы

  1. Использовать пропсы сокращений (m, p, w, h) для быстрого прототипирования.
  2. Применять theme scale вместо жестких значений, чтобы дизайн оставался консистентным.
  3. Комбинировать массивы и объекты для адаптивной верстки.
  4. Следить за контекстом контейнера, чтобы отступы и размеры корректно вписывались в сетку.
  5. Проверять визуальные границы при использовании minW, maxW, чтобы избежать «ломки» интерфейса на разных экранах.

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

Оглавление