Создание размеров компонентов

В Chakra UI управление размерами компонентов строится на принципе использования системы масштабируемых значений, определённых в теме. Каждый компонент поддерживает свойства size, width, height, minWidth, maxWidth, minHeight, maxHeight и boxSize, что позволяет гибко настраивать отображение элементов в зависимости от контекста интерфейса.

Свойство size

Многие компоненты Chakra UI, такие как Button, Input, Avatar, поддерживают параметр size. Значение свойства может быть:

  • sm – маленький
  • md – средний (значение по умолчанию)
  • lg – большой

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

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

<Button size="sm">Маленькая кнопка</Button>
<Button size="md">Средняя кнопка</Button>
<Button size="lg">Большая кнопка</Button>

При использовании size компоненты автоматически подбирают внутренние отступы (padding), размеры шрифта и радиус скругления, обеспечивая согласованность визуального дизайна.

Свойства width и height

Для точного контроля размеров можно использовать свойства width (w) и height (h). Chakra UI поддерживает различные единицы измерения:

  • Проценты (%)
  • Пиксели (px)
  • Эм-единицы (em)
  • Рем-единицы (rem)
  • Значения темы, например 4, 8, 16 (система масштабирования spacing)

Пример:

<Box w="200px" h="100px" bg="teal.500">
  Контейнер фиксированного размера
</Box>

<Box w="50%" h="50vh" bg="orange.300">
  Контейнер относительного размера
</Box>

Использование сокращений w и h позволяет писать более компактный код без потери читаемости.

Свойства minWidth, maxWidth, minHeight, maxHeight

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

Пример:

<Box
  w="100%"
  maxW="600px"
  minW="300px"
  h="200px"
  bg="blue.200"
>
  Адаптивный контейнер
</Box>

В этом примере ширина компонента будет занимать всю доступную область, но никогда не меньше 300px и не больше 600px, что обеспечивает устойчивость интерфейса при изменении размеров экрана.

Свойство boxSize

Для квадратных элементов удобнее использовать свойство boxSize, которое одновременно задаёт и ширину, и высоту.

<Avatar boxSize="40px" src="avatar.jpg" />
<Box boxSize="100px" bg="green.400" />

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

Масштабирование через тему

Все числовые значения (spacing, sizes) можно определять через тему Chakra UI, что позволяет легко управлять дизайном через единый источник:

<ThemeProvider
  theme={{
    sizes: {
      container: "1200px",
      avatar: "48px",
    },
    space: {
      4: "16px",
      8: "32px",
    }
  }}
>
  <Box w="container" h="8" bg="purple.300" />
</ThemeProvider>

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

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

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

<Box
  w={{ base: "100%", md: "50%", lg: "25%" }}
  h={{ base: "100px", md: "200px", lg: "300px" }}
  bg="pink.400"
/>
  • base – для всех устройств по умолчанию
  • md – средние экраны и выше
  • lg – большие экраны

Такой подход позволяет легко создавать адаптивные макеты без медиа-запросов в CSS.

Сочетание размеров с Flex и Grid

Размеры компонентов часто комбинируются с Flexbox и Grid:

<Flex w="100%" h="200px" justify="space-between">
  <Box w="30%" h="100%" bg="red.300" />
  <Box w="30%" h="100%" bg="blue.300" />
  <Box w="30%" h="100%" bg="green.300" />
</Flex>

Использование Chakra UI совместно с Flex и Grid обеспечивает гибкое размещение элементов с точным контролем размеров.

В следующей части рассмотрены динамические размеры компонентов с использованием CSS-свойств и пропсов темы, что позволяет создавать полностью адаптивные и консистентные интерфейсы.

Оглавление