Text utilities

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

Классы размера текста

Vuetify использует систему классов, обозначающую размер текста через префикс text- и ключевые размеры:

  • text-h1 … text-h6 – имитация заголовков HTML с соответствующей типографикой.
  • text-subtitle-1 и text-subtitle-2 – для подзаголовков и второстепенной информации.
  • text-body-1 и text-body-2 – основной текст.
  • text-caption – мелкий вспомогательный текст, обычно для подписей.
  • text-overline – текст для верхнего регистра, часто используется в карточках или навигации.

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

<div class="text-h4">Заголовок уровня H4</div>
<div class="text-body-1">Основной текст страницы</div>
<div class="text-caption">Подпись к изображению</div>

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

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

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

Эти классы удобно использовать для компонентов v-card, v-list и других контейнеров:

<v-card class="text-center">
  <v-card-title>Центрированный заголовок</v-card-title>
  <v-card-text class="text-justify">
    Текст внутри карточки будет распределён по ширине блока, создавая аккуратный вид.
  </v-card-text>
</v-card>

Управление жирностью и стилем текста

Vuetify предоставляет утилиты для жирности и наклона текста:

  • font-weight-light – лёгкий шрифт.
  • font-weight-regular – стандартный.
  • font-weight-medium – чуть более заметный.
  • font-weight-bold – жирный текст.
  • text-italic – курсив.

Эти классы можно комбинировать с размерами и цветами:

<div class="text-body-1 font-weight-bold text-italic">
  Важный акцентированный текст
</div>

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

Для контроля длинного текста Vuetify предлагает классы:

  • text-truncate – обрезка текста с добавлением многоточия, если текст не помещается в одну строку.
  • text-no-wrap – запрещает перенос текста, оставляя его в одной строке.
  • text-wrap – принудительный перенос текста.

Пример обрезки текста:

<div class="text-truncate" style="max-width: 200px;">
  Очень длинный текст, который не помещается в одну строку
</div>

Преобразование регистра

Классы для управления регистром текста:

  • text-uppercase – переводит весь текст в верхний регистр.
  • text-lowercase – переводит весь текст в нижний регистр.
  • text-capitalize – делает первую букву каждого слова заглавной.

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

<div class="text-uppercase font-weight-medium">верхний регистр</div>
<div class="text-capitalize">каждое слово с заглавной буквы</div>

Цвет текста

Vuetify интегрирован с системой цветов Material Design, позволяя легко применять цвета к тексту:

  • Формат: text-[color]-[lightness]
  • Примеры цветов: primary, secondary, success, error, warning, info, grey.
  • Примеры уровней насыщенности: text-primary, text-primary--lighten-2, text-error--darken-3.

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

<div class="text-success">Текст с цветом успеха</div>
<div class="text-error--darken-1">Текст с цветом ошибки</div>

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

Vuetify позволяет комбинировать несколько классов одновременно, создавая богатую типографику без кастомного CSS:

<v-card class="pa-4">
  <v-card-title class="text-h5 font-weight-bold text-center text-primary">
    Заголовок карточки
  </v-card-title>
  <v-card-text class="text-body-2 text-justify text-secondary">
    Подробное описание, которое красиво распределено по ширине блока.
  </v-card-text>
  <v-card-actions>
    <div class="text-caption text-uppercase font-weight-medium text-info">
      Подпись к действию
    </div>
  </v-card-actions>
</v-card>

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

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

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

  • Синтаксис: text-[size]-[breakpoint]
  • Пример: text-h4 text-h5-md text-h6-sm Это означает, что на больших экранах текст будет h4, на средних – h5, на маленьких – h6.
<div class="text-h3 text-h5-md text-h6-sm">
  Адаптивный заголовок
</div>

Работа с компонентами Vuetify

Большинство компонентов Vuetify, таких как v-btn, v-list-item, v-toolbar, поддерживают классы текста напрямую, что позволяет управлять стилем текста без вложенного CSS:

<v-btn class="text-uppercase font-weight-bold text-white">
  Нажми меня
</v-btn>

<v-list-item>
  <v-list-item-title class="text-body-1 font-weight-medium text-primary">
    Элемент списка
  </v-list-item-title>
</v-list-item>

Использование в связке с темами

Текстовые утилиты Vuetify тесно интегрированы с системой тем, позволяя автоматически подстраиваться под светлую или тёмную тему приложения. Классы цвета и фонового текста изменяют оттенки в зависимости от текущей темы, что сохраняет читаемость и визуальную гармонию.

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

Оглавление