Text

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

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

  • children – содержимое текста. Может быть строкой, элементом JSX или массивом элементов.
  • as – позволяет указать HTML-тег, который будет использоваться для рендеринга (p, span, strong, em, h1–h6 и другие).
  • fontSize – размер текста. Chakra UI поддерживает значения в пикселях (px), em, rem и системные размеры (sm, md, lg, xl и т.д.).
  • fontWeight – жирность текста (normal, medium, bold и числовые значения 100–900).
  • lineHeight – высота строки. Может быть числом или строкой с единицами измерения (1.5, 20px).
  • letterSpacing – интервал между буквами (tight, normal, wide, widest или конкретное значение в px/rem).
  • textAlign – выравнивание текста (left, center, right, justify).
  • color – цвет текста. Chakra UI поддерживает как стандартные CSS-значения, так и системные цвета из темы (gray.500, red.600 и т.д.).
  • noOfLines – ограничение количества строк текста с автоматическим добавлением многоточия, если текст превышает указанное количество.
import { Text } from "@chakra-ui/react";

<Text fontSize="xl" fontWeight="bold" color="teal.500">
  Пример текста с крупным шрифтом и акцентным цветом
</Text>

<Text noOfLines={2}>
  Этот текст будет обрезан после второй строки с добавлением многоточия...
</Text>

Использование свойства as

Свойство as позволяет изменять семантический тег без потери стилей Chakra UI. Это особенно важно для SEO и доступности:

<Text as="h1" fontSize="4xl" fontWeight="extrabold">
  Заголовок первого уровня
</Text>

<Text as="span" color="gray.600">
  Обычный текст внутри абзаца
</Text>

Можно комбинировать с другими свойствами:

<Text as="em" fontStyle="italic" color="purple.600">
  Подчёркнутый или курсивный текст
</Text>

Работа с цветом и темой

Chakra UI использует тематизацию, что позволяет управлять цветами централизованно:

<Text color="blue.500" bg="gray.100" p={2} borderRadius="md">
  Текст с цветом из темы и фоновым оттенком
</Text>

Цвета можно задавать через:

  • системные оттенки (blue.500, red.300);
  • CSS-значения (#ff6347, rgb(255, 99, 71)).

Типографика и адаптивность

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

<Text
  fontSize={{ base: "sm", md: "md", lg: "xl" }}
  lineHeight={{ base: "short", md: "base", lg: "tall" }}
>
  Этот текст будет менять размер и высоту строки в зависимости от ширины экрана
</Text>
  • base – для мобильных устройств
  • sm, md, lg, xl – для разных брейкпоинтов

Это упрощает создание адаптивной типографики без использования CSS медиа-запросов.

Управление обрезкой текста

Свойство noOfLines позволяет автоматически ограничить количество строк и добавить многоточие:

<Text noOfLines={3}>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>

Результат: текст не займет более трёх строк, а оставшаяся часть будет скрыта с .... Также можно комбинировать с isTruncated для однострочной обрезки:

<Text isTruncated maxWidth="200px">
  Очень длинный текст, который будет обрезан...
</Text>

Стилизация через Chakra UI Props

Chakra UI позволяет напрямую применять CSS-свойства к компоненту Text через props:

  • Отступы и маргины: m, mt, mb, ml, mr, p, px, py
  • Границы и радиусы: border, borderColor, borderRadius
  • Тени: boxShadow
  • Фон: bg, background, backgroundColor
<Text
  bg="gray.50"
  p={4}
  border="1px solid"
  borderColor="gray.200"
  borderRadius="lg"
  boxShadow="md"
>
  Текст с полем и тенью
</Text>

Интернационализация и шрифты

С помощью Chakra UI можно легко управлять шрифтами:

  • fontFamily – задаёт семейство шрифта (heading, body, или кастомное)
  • fontStyle – курсив, нормальный
  • textTransform – верхний регистр, нижний регистр, capitalize
<Text fontFamily="heading" textTransform="uppercase" fontWeight="semibold">
  Заголовок в верхнем регистре
</Text>

Состояния и псевдоклассы

Chakra UI поддерживает псевдоклассы CSS напрямую через props:

<Text
  color="gray.700"
  _hover={{ color: "blue.500", textDecoration: "underline" }}
  _focus={{ color: "red.500" }}
>
  Наведи курсор или сфокусируйся для изменения цвета
</Text>
  • _hover – при наведении
  • _focus – при фокусе
  • _active – при нажатии
  • _disabled – для отключенного состояния

Композиция и вложенность

Text можно вкладывать друг в друга или использовать внутри других компонентов:

<Text fontSize="lg">
  Основной текст с <Text as="span" color="red.400">выделением</Text> внутри.
</Text>

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

Практическая рекомендация

  • Использовать as для корректной семантики документа.
  • Применять noOfLines для ограничения текста в карточках и превью.
  • Использовать адаптивные массивы для fontSize, lineHeight и letterSpacing.
  • Комбинировать псевдоклассы для интерактивного текста.
  • Цвета и шрифты брать из темы, чтобы обеспечить единый стиль приложения.

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

Оглавление