Divider

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

Основное использование

Базовое использование Divider минимально и выглядит следующим образом:

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

function Example() {
  return (
    <Box>
      <Text>Первый блок контента</Text>
      <Divider />
      <Text>Второй блок контента</Text>
    </Box>
  );
}

По умолчанию Divider создаёт горизонтальную линию, которая занимает всю ширину контейнера. Она автоматически адаптируется к теме Chakra UI, наследуя цвета из палитры.

Горизонтальный и вертикальный Divider

Divider поддерживает как горизонтальное, так и вертикальное разделение.

Горизонтальный Divider — используется по умолчанию:

<Divider orientation="horizontal" />

Вертикальный Divider — применяется для разделения контента в строке:

<Box display="flex" alignItems="center">
  <Text>Левая колонка</Text>
  <Divider orientation="vertical" height="40px" mx={4} />
  <Text>Правая колонка</Text>
</Box>

Ключевые моменты при вертикальном Divider:

  • Необходимо указывать height, иначе линия не отобразится.
  • Свойство mx или my позволяет задать отступы слева и справа (или сверху и снизу).

Настройка цвета и толщины

Компонент поддерживает все системные стили Chakra UI, включая цвет и толщину линии:

<Divider borderColor="gray.400" borderWidth="2px" />
  • borderColor задаёт цвет линии. Можно использовать как системные цвета Chakra UI, так и произвольные HEX или RGB.
  • borderWidth управляет толщиной линии. По умолчанию это 1px.

Стилизация с помощью props

Chakra UI предоставляет широкий набор props для кастомизации Divider:

  • orientation — horizontal или vertical.
  • borderColor — цвет линии.
  • borderWidth — толщина линии.
  • margin / padding — отступы вокруг линии (my, mx, m, p).
  • flexItem — при использовании вертикального Divider в Flex-контейнере, prop flexItem позволяет линии адаптироваться к размерам соседних элементов.

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

<Box display="flex" alignItems="center">
  <Text>Левая часть</Text>
  <Divider orientation="vertical" flexItem mx={4} />
  <Text>Правая часть</Text>
</Box>

Divider с текстом

Divider может отображать текст, разделяющий контент, что часто используется для указания логических границ между секциями:

<Divider orientation="horizontal" my={4}>
  OR
</Divider>

Особенности:

  • Текст располагается по центру линии.
  • Свойство my задаёт вертикальный отступ.
  • Внутренний текст наследует стандартные стили Chakra UI, которые можно переопределить с помощью TextProps.

Адаптация к темной и светлой теме

Компонент Divider автоматически адаптируется под текущую тему, если используется системный цвет:

<Divider borderColor="gray.200" _dark={{ borderColor: "gray.600" }} />
  • **_dark** — специальный prop для темы Chakra UI. Позволяет задать альтернативный стиль для тёмной темы.
  • Можно комбинировать с системными цветами или кастомными палитрами.

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

Divider часто используется совместно с компонентами Box, Stack и Flex для создания сложной структуры интерфейса:

<Box p={5}>
  <Stack spacing={4}>
    <Text>Секция 1</Text>
    <Divider />
    <Text>Секция 2</Text>
    <Divider />
    <Text>Секция 3</Text>
  </Stack>
</Box>
  • В комбинации со Stack автоматически применяются отступы между разделами.
  • Divider можно использовать внутри Flex, Grid и HStack/VStack для создания адаптивных макетов.

Итоговые рекомендации по использованию Divider

  • Для горизонтальных разделителей достаточно базового Divider с default orientation.
  • Для вертикальных — обязательно задавать height и использовать flexItem в Flex-контейнерах.
  • Цвет и толщину линии можно легко кастомизировать через borderColor и borderWidth.
  • Для логических разделений контента с текстом используйте вложенный текст внутри Divider.
  • Адаптация к темной/светлой теме осуществляется через **_dark** или системные цвета Chakra UI.

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

Оглавление