Heading

Компонент Heading в Chakra UI используется для создания заголовков различного уровня с поддержкой адаптивного дизайна, темизации и стилизации. Он автоматически применяет семантические теги HTML (h1–h6) в зависимости от свойства as, что обеспечивает корректную структуру документа и улучшает SEO.

Уровни заголовков

По умолчанию Heading рендерится как h2, но можно указать любой уровень с помощью пропса as:

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

<Heading as="h1">Главный заголовок</Heading>
<Heading as="h2">Подзаголовок второго уровня</Heading>
<Heading as="h3">Заголовок третьего уровня</Heading>
  • as — задаёт семантический HTML-тег.
  • Каждый уровень по умолчанию имеет свой размер шрифта, который можно переопределить через пропс size.

Размеры заголовков

Chakra UI предоставляет встроенные размеры для заголовков через пропс size:

Size Описание
xs Очень маленький заголовок
sm Малый заголовок
md Средний (по умолчанию для h2)
lg Большой заголовок
xl Очень большой заголовок
2xl Максимальный заголовок

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

<Heading size="xl">Очень большой заголовок</Heading>
<Heading size="md">Средний заголовок</Heading>
<Heading size="sm">Малый заголовок</Heading>

Цвет и темизация

Chakra UI полностью поддерживает темы и цветовые схемы. Для задания цвета текста используется пропс color:

<Heading color="teal.500">Заголовок с цветом темы</Heading>
<Heading color="red.400">Красный заголовок</Heading>

Цвета можно брать из дефолтной темы Chakra или определять кастомные в объекте темы. Для адаптации под светлую и тёмную темы используется свойство useColorModeValue.

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

const color = useColorModeValue("gray.800", "whiteAlpha.900");

<Heading color={color}>Адаптивный заголовок</Heading>

Свойства текста и стилизация

Компонент Heading наследует все свойства стилизации Text, включая:

  • fontWeight — вес шрифта (normal, medium, bold и числовые значения)
  • lineHeight — высота строки
  • letterSpacing — межбуквенный интервал
  • textTransform — трансформация текста (uppercase, capitalize, lowercase)

Пример комплексной стилизации:

<Heading
  as="h2"
  size="lg"
  fontWeight="semibold"
  letterSpacing="wide"
  lineHeight="short"
  textTransform="uppercase"
>
  Стилизованный заголовок
</Heading>

Адаптивные заголовки

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

<Heading
  size={{ base: "md", md: "xl", lg: "2xl" }}
>
  Адаптивный заголовок
</Heading>
  • base — для мобильных устройств
  • md — для средних экранов
  • lg — для больших экранов

Использование с Flex и Box

Часто заголовки размещаются в контейнерах Flex или Box для управления отступами и выравниванием:

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

<Flex align="center" justify="space-between" mb={4}>
  <Heading size="lg">Заголовок</Heading>
  <Box>Дополнительный элемент</Box>
</Flex>
  • align — вертикальное выравнивание
  • justify — горизонтальное выравнивание
  • mb — нижний отступ, можно использовать единицы Chakra (4 = 1rem по умолчанию)

Иконки и дочерние элементы

Заголовки можно комбинировать с иконками или другими элементами через компонент HStack:

import { HStack, Icon } from "@chakra-ui/react";
import { MdStar } from "react-icons/md";

<HStack>
  <Icon as={MdStar} color="yellow.400" />
  <Heading size="lg">Заголовок с иконкой</Heading>
</HStack>

Доступность и семантика

  • Использование правильного as обеспечивает семантическую структуру документа.
  • Заголовки улучшают навигацию с помощью скринридеров.
  • Поддержка контрастности и цветов темы повышает доступность.

Резюме свойств

Свойство Тип Описание
as string Семантический HTML-тег (h1–h6)
size string Размер заголовка (xs–2xl)
color string Цвет текста, поддержка темы
fontWeight string/number Толщина шрифта
lineHeight string/number Высота строки
letterSpacing string Межбуквенный интервал
textTransform string Преобразование текста
noOfLines number Ограничение количества строк с обрезкой текста

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

Оглавление