Container

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

Основные свойства

  • maxW — задаёт максимальную ширину контейнера. Можно использовать предопределённые размеры Chakra UI ("sm", "md", "lg", "xl", "2xl") или конкретные значения в пикселях или процентах.

    <Container maxW="container.md">
  Содержимое контейнера
</Container>

  • centerContent — булево свойство, которое автоматически центрирует вложенные элементы по горизонтали.

    <Container centerContent>
  <Button colorScheme="teal">Нажми меня</Button>
</Container>

  • padding и px/py — управляют внутренними отступами контейнера. Chakra UI поддерживает систему сокращений (p, px, py) для удобства.

    <Container p={4}>
  <Text>Контейнер с отступами</Text>
</Container>

  • fluid (альтернативный подход через maxW="100%") — делает контейнер растягивающимся на всю ширину экрана, при этом сохраняя внутренние паддинги.

Адаптивные контейнеры

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

<Container
  maxW={{ base: "90%", md: "container.md", lg: "container.lg" }}
>
  <Text>Адаптивный контейнер</Text>
</Container>
  • base — для мобильных устройств.
  • md — для планшетов.
  • lg — для больших экранов.

Такой подход упрощает создание отзывчивых интерфейсов без необходимости писать медиа-запросы вручную.

Центрирование контента

Использование centerContent автоматически добавляет display: flex, flexDirection: column и центрирует вложенные элементы:

<Container centerContent>
  <Avatar size="xl" name="John Doe" />
  <Heading mt={4}>Добро пожаловать</Heading>
</Container>

Если требуется более тонкое управление расположением, можно комбинировать Container с Flex или Stack.

Вложенные контейнеры

Chakra UI допускает вложенность контейнеров для создания сложных макетов. Внутренний контейнер может иметь свой maxW и отступы, не влияя на внешний:

<Container maxW="container.lg">
  <Container maxW="container.md" p={6} bg="gray.100">
    Вложенный контейнер
  </Container>
</Container>

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

Работа с цветом и фоном

Container поддерживает все стандартные стили Chakra UI:

  • bg — фон
  • color — цвет текста
  • borderRadius, boxShadow — для визуальных эффектов
<Container maxW="container.md" bg="teal.50" p={4} borderRadius="md" boxShadow="md">
  <Text>Контейнер с фоном и тенью</Text>
</Container>

Интеграция с другими компонентами

Чаще всего Container используется совместно с:

  • Stack / VStack / HStack — для вертикальных и горизонтальных списков элементов
  • Flex — для гибкой компоновки
  • Box — для блоков с индивидуальными стилями

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

<Container maxW="container.lg" centerContent>
  <VStack spacing={6}>
    <Heading>Заголовок</Heading>
    <Text>Описание секции с ограниченной шириной</Text>
    <Button colorScheme="blue">Кнопка действия</Button>
  </VStack>
</Container>

Полезные советы

  • Для глобального ограничения ширины всех контейнеров на странице можно создать обертку Layout и использовать её повторно.
  • Комбинируя maxW и px, легко сделать контейнер адаптивным без медиа-запросов.
  • Не стоит использовать контейнер для каждого блока на странице — достаточно для основных секций, чтобы сохранить консистентность макета.

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

Оглавление