Классы заголовков

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

В Vuetify классы заголовков условно делятся на шесть уровней: display, headline, title, subheading, body и caption. Каждый уровень предназначен для определённых случаев использования в интерфейсе.

Display

Классы display-1, display-2, display-3, display-4 предназначены для самых крупных заголовков. Обычно используются для главных страниц, крупных баннеров и экранов приветствия.

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

<h1 class="display-4">Главный заголовок</h1>
<h2 class="display-3">Подзаголовок экрана</h2>
<h3 class="display-2">Средний акцент</h3>
<h4 class="display-1">Мелкий, но заметный текст</h4>

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

  • Максимальная читаемость на больших экранах.
  • Используется с минимальными дополнительными стилями.
  • Обычно применяется без жирного начертания (font-weight: 400 по умолчанию).

Headline

Классы headline и headline-[number] применяются для заголовков разделов и ключевых элементов интерфейса.

Пример:

<h2 class="headline">Заголовок раздела</h2>
<h3 class="headline font-weight-medium">Подраздел</h3>

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

  • Размер шрифта меньше display, но выше title.
  • Идеально для разделения контента и визуальной иерархии страниц.
  • Можно комбинировать с утолщением шрифта (font-weight-medium или font-weight-bold).

Title

Классы title применяются для заголовков карточек, модальных окон, таблиц и других компонентов.

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

<v-card>
  <v-card-title class="title">Заголовок карточки</v-card-title>
  <v-card-text>Описание содержимого карточки.</v-card-text>
</v-card>

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

  • Средний размер шрифта, оптимальный для внутренних элементов.
  • Подходит для заголовков компонентов и элементов UI с ограниченной шириной.
  • Часто комбинируется с subtitle-1 или subtitle-2 для создания контрастного текста.

Subheading

Классы subheading предназначены для второстепенных заголовков, пояснительных надписей и акцентного текста.

Пример:

<h3 class="subheading">Подзаголовок секции</h3>
<p class="subheading grey--text">Пояснительный текст</p>

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

  • Меньший размер шрифта, чем title, но выше body.
  • Может использоваться для пояснений и комментариев в интерфейсе.
  • Часто комбинируется с цветами текста (grey--text, primary--text) для усиления визуальной иерархии.

Body

Классы body-1 и body-2 применяются для основного текста.

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

<p class="body-1">Основной текст страницы или карточки.</p>
<p class="body-2 grey--text text--darken-1">Мелкий дополнительный текст.</p>

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

  • Используется для текста контента, абзацев и описаний.
  • body-1 – стандартный размер текста, body-2 – уменьшенный.
  • Поддерживает цветовые модификаторы Vuetify для создания визуальной структуры.

Caption и Overline

Классы caption и overline применяются для мелких пояснительных текстов, подписей к изображениям, информации о дате или авторе.

Пример:

<p class="caption grey--text">Подпись к изображению</p>
<p class="overline">Секция с датой</p>

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

  • Минимальный размер шрифта.
  • Идеально подходит для второстепенной информации и меток.
  • Чаще всего используется с оттенками серого цвета или прозрачностью текста.

Управление весом и цветом текста

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

<h2 class="title font-weight-bold primary--text">Заголовок с акцентом</h2>
<h3 class="headline font-weight-light grey--text">Лёгкий подзаголовок</h3>

Возможные модификаторы:

  • Вес шрифта: font-weight-light, font-weight-regular, font-weight-medium, font-weight-bold.
  • Цвет текста: primary--text, secondary--text, grey--text, red--text, blue--text.

Взаимодействие с компонентами Vuetify

Все классы заголовков можно использовать как с обычными HTML-элементами (h1–h6, p, span), так и с компонентами Vuetify, такими как v-card-title, v-toolbar-title, v-list-item-title.

Пример:

<v-toolbar>
  <v-toolbar-title class="headline font-weight-bold">Главная панель</v-toolbar-title>
</v-toolbar>

<v-list>
  <v-list-item>
    <v-list-item-title class="title">Элемент списка</v-list-item-title>
    <v-list-item-subtitle class="subheading">Дополнительная информация</v-list-item-subtitle>
  </v-list-item>
</v-list>

Адаптивность и масштабирование

Классы заголовков Vuetify автоматически масштабируются под различные устройства. Комбинация с breakpoint-классами позволяет изменять размер заголовка в зависимости от ширины экрана:

<h1 class="display-3 d-sm-none d-md-block">Большой заголовок на планшете и ПК</h1>
<h2 class="headline d-block d-md-none">Меньший заголовок на мобильных</h2>
  • d-sm-none, d-md-block управляют отображением по брейкпоинтам.
  • Обеспечивает читабельность текста на любых устройствах.

Итоговая структура

  • display-1 … display-4 – крупные заголовки, баннеры, экраны приветствия.
  • headline – разделы страниц, важные акценты.
  • title – заголовки карточек, компонентов, таблиц.
  • subheading – второстепенные заголовки, пояснительные тексты.
  • body-1, body-2 – основной текст и абзацы.
  • caption, overline – подписи, мелкая второстепенная информация.

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

Оглавление