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

Vuetify предоставляет мощный набор утилит для управления выравниванием текста. В основе лежат CSS-классы, которые можно применять к любым компонентам, поддерживающим слоты для текста, таким как <v-btn>, <v-card-text>, <v-list-item-content> и <v-toolbar-title>. Выравнивание может быть горизонтальным и вертикальным, и его можно комбинировать для сложных макетов.

Горизонтальное выравнивание текста

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

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

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

<v-card>
  <v-card-text class="text-center">
    Текст, выровненный по центру
  </v-card-text>
</v-card>

В данном примере класс text-center применяется к <v-card-text>, что автоматически центрирует текст внутри карточки.

Вертикальное выравнивание текста

Вертикальное выравнивание текста особенно важно внутри флекс-контейнеров. Vuetify использует Flexbox, что позволяет использовать утилиты align-:

  • align-start — выравнивание к верхнему краю
  • align-center — выравнивание по центру по вертикали
  • align-end — выравнивание к нижнему краю

Пример с вертикальным выравниванием:

<v-row class="fill-height" align="center">
  <v-col>
    <div>Текст выровнен по центру вертикально</div>
  </v-col>
</v-row>

fill-height заставляет строку <v-row> занимать всю доступную высоту, а align="center" центрует содержимое по вертикали.

Комбинированное выравнивание

Для сложных макетов часто требуется одновременно управлять горизонтальным и вертикальным выравниванием. Используются комбинации классов или атрибутов Vuetify:

<v-row class="fill-height" align="center" justify="center">
  <v-col cols="6">
    <v-card>
      <v-card-text class="text-right">
        Текст выровнен по правому краю и центрирован по вертикали
      </v-card-text>
    </v-card>
  </v-col>
</v-row>
  • justify="center" — горизонтальное центрирование содержимого внутри <v-row>
  • align="center" — вертикальное центрирование
  • text-right — выравнивание текста внутри карточки по правому краю

Это позволяет создавать точно выровненные блоки в сложных интерфейсах.

Размер и адаптивность выравнивания

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

  • text-xs-center, text-sm-right, text-md-left и т.д.
  • Эти классы действуют только при достижении соответствующего диапазона ширины экрана.

Пример:

<v-card-text class="text-xs-center text-md-left">
  На маленьких экранах текст центрирован, на средних и больших — по левому краю
</v-card-text>

Адаптивное выравнивание особенно важно при создании мобильных интерфейсов, где пространство ограничено, а на больших экранах макет должен выглядеть иначе.

Тонкости выравнивания внутри компонентов

Некоторые компоненты Vuetify имеют свои специфические слоты и способы выравнивания текста:

  • <v-btn>: классы text-left, text-center, text-right применяются к тексту кнопки.
  • <v-toolbar-title>: автоматически занимает всю доступную ширину, поэтому text-center центрирует заголовок.
  • <v-list-item-content>: внутри списка текст можно выравнивать через class="text-...".

Пример для списка:

<v-list>
  <v-list-item>
    <v-list-item-content class="text-right">
      Пункт списка выровнен по правому краю
    </v-list-item-content>
  </v-list-item>
</v-list>

Использование CSS-переменных и кастомизация

Vuetify позволяет управлять выравниванием не только через готовые классы, но и через персонализированные стили. Например:

<v-card-text style="text-align: justify; line-height: 1.6;">
  Длинный текст, который выравнивается по ширине с увеличенным межстрочным интервалом
</v-card-text>

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

Практические рекомендации

  • Для простого текста используйте классы text-left, text-center, text-right — это ускоряет разработку.
  • Для сложных макетов с флексами используйте атрибуты align и justify на <v-row> или <v-col>.
  • Для адаптивного дизайна комбинируйте классы вида text-xs-center text-md-left.
  • Для кастомных эффектов подключайте inline-стили или глобальные CSS-классы, используя Vuetify-переменные, чтобы сохранить консистентность интерфейса.

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

Оглавление