Typography

В библиотеке Ant Design модуль Typography предоставляет мощные средства для работы с текстом в интерфейсе. Он включает набор компонентов, которые позволяют создавать структурированные, читаемые и визуально гармоничные текстовые блоки, обеспечивая единый стиль для всего приложения.

Компоненты Typography

  1. Typography.Title Используется для заголовков разного уровня. Поддерживает уровни h1–h5 и дополнительные параметры для управления стилем.

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

    import { Typography } from 'antd';
const { Title } = Typography;

<Title level={1}>Главный заголовок</Title>
<Title level={3}>Подзаголовок</Title>

    Ключевые параметры:

    • level – уровень заголовка (1–5).
    • editable – позволяет редактировать текст напрямую на странице.
    • copyable – добавляет возможность копирования текста в буфер обмена.

  2. Typography.Paragraph Основной компонент для абзацев текста. Поддерживает автоматическое управление отступами, обрезку длинного текста и добавление интерактивных функций.

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

    import { Typography } from 'antd';
const { Paragraph } = Typography;

<Paragraph>
  Это пример абзаца, который можно сделать <Paragraph copyable>копируемым</Paragraph>.
</Paragraph>

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

    • ellipsis – позволяет обрезать текст с добавлением многоточия.
    • copyable – делает текст удобным для копирования.
    • editable – делает текст редактируемым пользователем.

  3. Typography.Text Легковесный компонент для небольших текстовых элементов, таких как пометки, подписи или inline-текст.

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

    import { Typography } from 'antd';
const { Text } = Typography;

<Text type="secondary">Второстепенный текст</Text>
<Text mark>Выделенный текст</Text>
<Text underline>Подчёркнутый текст</Text>
<Text delete>Зачёркнутый текст</Text>

    Типы форматирования:

    • type – secondary, warning, danger для цветового выделения.
    • mark, underline, delete, code – визуальное оформление текста.

Редактируемый текст

Ant Design позволяет превращать заголовки, абзацы и текст в редактируемые поля с помощью свойства editable.

Пример редактирования текста:

<Paragraph editable={{ onChange: (value) => console.log(value) }}>
  Редактируемый абзац
</Paragraph>

Параметры editable:

  • onChange – функция, вызываемая при изменении текста.
  • tooltip – текст подсказки при наведении на редактируемый элемент.
  • maxLength – ограничение длины редактируемого текста.

Копирование текста

Свойство copyable добавляет кнопку для быстрого копирования текста в буфер обмена.

Пример:

<Text copyable>Скопируйте этот текст</Text>
<Paragraph copyable={{ text: 'Пользовательский текст для копирования' }}>
  Обычный абзац
</Paragraph>

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

  • Можно передавать объект с кастомным текстом для копирования.
  • Поддерживается callback при успешном копировании.

Трёхточечное обрезание (Ellipsis)

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

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

<Paragraph ellipsis={{ rows: 2, expandable: true, symbol: 'Подробнее' }}>
  Длинный текст, который нужно обрезать после двух строк...
</Paragraph>

Параметры ellipsis:

  • rows – количество строк до обрезки.
  • expandable – добавляет кнопку для разворачивания текста.
  • symbol – текст для кнопки разворачивания.

Стилизация и типографика

Компоненты Typography поддерживают кастомизацию через:

  • Цвет текста (type, style={{ color: '#f50' }}).
  • Размер и высоту строки (style={{ fontSize: '16px', lineHeight: 1.5 }}).
  • Инлайн и блочное оформление (Text для inline, Paragraph для блоков).

Пример кастомного стиля:

<Title level={2} style={{ color: '#1890ff', fontWeight: 700 }}>
  Кастомизированный заголовок
</Title>

Комбинирование компонентов

Можно комбинировать Title, Paragraph и Text для создания сложных текстовых блоков.

Пример комплексного блока:

<Paragraph>
  <Text strong>Важное:</Text> используйте <Text code>Typography</Text> для структурирования текста.
</Paragraph>
<Paragraph>
  <Text type="secondary">Подсказка:</Text> редактируемый и копируемый текст улучшает UX.
</Paragraph>

Адаптивность

Все компоненты Typography автоматически подстраиваются под размеры экрана и наследуют базовые стили темы Ant Design, что делает интерфейс консистентным на любых устройствах.

Этот набор возможностей делает Typography в Ant Design универсальным инструментом для создания аккуратного, функционального и современного текстового контента в приложениях на JavaScript.

Оглавление