Классы основного текста

Vuetify предоставляет мощный набор утилитарных классов для работы с текстом, позволяя быстро и гибко управлять визуальным представлением текста в компонентах Vue.js. Эти классы делятся на несколько ключевых категорий: типографика, цвет текста, выравнивание, трансформация и отступы.

Типографика текста

Типографические классы отвечают за размеры, начертание и толщину шрифта. В Vuetify применяются следующие основные группы:

  • Размеры текста:

    • text-h1 — заголовок первого уровня, крупный текст.
    • text-h2 — заголовок второго уровня.
    • text-h3 … text-h6 — заголовки меньших уровней.
    • text-subtitle-1, text-subtitle-2 — подзаголовки среднего размера.
    • text-body-1, text-body-2 — основной текст различной плотности.
    • text-caption — мелкий текст для примечаний.
    • text-overline — текст для верхних подписей и меток.

  • Начертание шрифта:

    • font-weight-light — тонкое начертание.
    • font-weight-regular — обычное начертание.
    • font-weight-medium — среднее начертание.
    • font-weight-bold — жирное начертание.

  • Стиль текста:

    • text-uppercase — преобразует текст в верхний регистр.
    • text-lowercase — нижний регистр.
    • text-capitalize — капитализация первой буквы каждого слова.

Эти классы могут комбинироваться, например:

<span class="text-h4 font-weight-bold text-uppercase">Заголовок</span>

Цвет текста

Vuetify использует систему цветовых классов, привязанную к теме приложения (light/dark) и стандартной палитре Material Design. Ключевые моменты:

  • Основные цветовые классы:

    • text-primary — основной цвет темы.
    • text-secondary — вторичный цвет.
    • text-success, text-error, text-warning, text-info — семантические цвета для статусов.

  • Использование оттенков:

    • text-primary lighten-2 — более светлый оттенок основного цвета.
    • text-secondary darken-3 — затемнённый оттенок вторичного цвета.

Цветовые классы можно применять к любому элементу, например:

<p class="text-success text-body-1">Операция выполнена успешно</p>

Выравнивание текста

Выравнивание управляется классами горизонтального позиционирования:

  • text-left — выравнивание по левому краю (по умолчанию).
  • text-center — центрирование текста.
  • text-right — выравнивание по правому краю.
  • text-justify — выравнивание по ширине.

Применение:

<div class="text-center text-h5">Центрированный заголовок</div>

Трансформация и обрезка текста

Vuetify поддерживает классы для контроля визуальной формы текста:

  • Обрезка и перенос:

    • text-truncate — обрезка текста с добавлением троеточия (…) при превышении ширины контейнера.
    • text-no-wrap — предотвращает перенос текста на новую строку.

  • Интервал между буквами и строками:

    • letter-spacing-1 … letter-spacing-5 — увеличивают расстояние между символами.
    • line-height-1 … line-height-5 — управляют высотой строки.

Применение утилитарных комбинаций

Vuetify позволяет комбинировать типографические, цветовые и выравнивающие классы для создания сложных текстовых блоков без написания дополнительного CSS. Примеры:

<h2 class="text-h2 font-weight-medium text-primary text-center">
  Добро пожаловать в Vuetify
</h2>

<p class="text-body-1 text-secondary text-justify line-height-2">
  Vuetify предоставляет полный набор компонентов Material Design для создания интерфейсов на Vue.js.
</p>
  • В этом примере заголовок совмещает размер, толщину шрифта, цвет и выравнивание.
  • Параграф использует основной размер текста, вторичный цвет, выравнивание по ширине и увеличенную высоту строки.

Мобильная адаптивность

Для адаптивных интерфейсов Vuetify поддерживает breakpoint-классы, которые позволяют менять текст в зависимости от ширины экрана:

  • text-sm-left, text-md-center, text-lg-right — выравнивание для разных размеров экранов.
  • text-h6-sm, text-h4-md — изменение размера заголовков в зависимости от breakpoint.

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

<h3 class="text-h6-sm text-h4-md text-center-md text-left-sm">
  Адаптивный заголовок
</h3>

Итоговая схема применения классов текста

  1. Определить роль текста — заголовок, подзаголовок, основной текст, примечание.
  2. Выбрать размер и начертание шрифта с помощью text-hX, text-body-X, font-weight-X.
  3. Назначить цвет через text-primary, text-success и оттенки.
  4. Установить выравнивание и трансформацию (text-center, text-uppercase).
  5. Добавить обрезку, перенос и интервалы при необходимости.
  6. Применять breakpoint-классы для мобильной адаптивности.

Эта система позволяет создавать чистые, гибкие и единообразные текстовые блоки во всех компонентах Vuetify, обеспечивая соответствие Material Design и адаптивность интерфейса.

Оглавление