Стилизация текста

В Naive UI стилизация текста осуществляется через встроенные компоненты, их пропсы и утилиты CSS-переменных, которые обеспечивают гибкость и консистентность оформления. Наиболее часто используемые элементы для работы с текстом включают n-text, n-typography, n-title и n-paragraph. Эти компоненты позволяют контролировать цвет, размер, шрифт, интерлиньяж и другие свойства без необходимости писать кастомные CSS-классы.

Компонент n-text

n-text — базовый компонент для вывода текста с поддержкой стилевых модификаторов.

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


  Пример выделенного текста

Ключевые свойства:

  • strong — делает текст жирным (font-weight: 600)
  • italic — наклонный шрифт (font-style: italic)
  • underline — подчеркивание
  • delete — зачеркивание
  • type — цвет текста, принимает значения: primary, success, warning, error, info
  • depth — уровень визуальной глубины, применяет прозрачность или контраст в зависимости от темы

Использование этих пропсов позволяет быстро создавать информативные текстовые блоки без дополнительных стилей.

Компонент n-typography

n-typography обеспечивает расширенные возможности форматирования текста и используется для создания многострочных текстовых блоков с абзацами, заголовками и списками.

Пример:


  
    Первый абзац с жирным текстом.
  
  
    Второй абзац курсивом.
  
  
    Абзац с предупреждающим цветом.

Особенности n-typography:

  • Управление стилем абзацев через пропсы strong, italic, underline, delete
  • Поддержка цветовых схем через type и depth
  • Встроенные компоненты n-title, n-paragraph для структурирования текста
  • Возможность комбинирования с n-text для сложного форматирования внутри абзацев

Заголовки и иерархия текста

n-title используется для создания заголовков разных уровней. Компонент поддерживает 4 уровня заголовков, задаваемых через проп level.

Заголовок 1 уровня
Заголовок 2 уровня

Пропсы n-title:

  • level — от 1 до 4, управляет размером и жирностью заголовка
  • type — цвет заголовка (primary, success, warning, error)
  • depth — уровень визуального контраста
  • underline — возможность подчеркнуть заголовок
  • disabled — делает текст полупрозрачным и неактивным

Использование n-title в сочетании с n-typography позволяет создавать структурированные текстовые блоки, удобные для восприятия.

Списки и форматирование

Компоненты для списков: n-list, n-list-item. Они поддерживают встроенную стилизацию и могут быть использованы совместно с n-text для форматирования элементов списка.


  
    Первый элемент списка
  
  
    Второй элемент списка

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

  • bordered — добавляет границы между элементами списка
  • Поддержка цветовых пропсов для каждого элемента через n-text
  • Возможность комбинировать с иконками и кнопками для создания сложных UI-блоков

Цветовая стилизация и темы

Naive UI использует CSS-переменные, которые позволяют динамически менять цвет текста в зависимости от темы (light или dark). Например:

  • --text-color-1 — основной цвет текста
  • --text-color-2 — второстепенный текст
  • --text-color-primary — цвет заголовков и акцентных элементов

Эти переменные можно переопределять в стилях:

:root {
  --text-color-primary: #1f3a93;
  --text-color-1: #333333;
}

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

Контроль размера и интерлиньяжа

Компоненты Naive UI поддерживают настройку размеров через пропсы и CSS-переменные:

  • size — для n-text, n-title, n-paragraph; значения: small, medium, large
  • line-height — управляется через CSS или пропсы depth, влияет на читаемость многострочного текста
  • letter-spacing — регулируется кастомно через стили

Пример:


  Текст с увеличенным интерлиньяжем и межбуквенным расстоянием

Комбинирование стилей

Naive UI позволяет комбинировать несколько стилей одновременно, создавая гибкие и выразительные текстовые блоки:


  Комбинированный стиль текста

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

Оглавление