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

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

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

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

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

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

<v-row>
  <v-col>
    <div class="text-uppercase">верхний регистр</div>
    <div class="text-lowercase">НИЖНИЙ РЕГИСТР</div>
    <div class="text-capitalize">пример текста</div>
  </v-col>
</v-row>

Стилизация текста с помощью Typography

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

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

Применение:

<v-row>
  <v-col>
    <div class="display-1">Display 1</div>
    <div class="headline">Headline</div>
    <div class="body-1">Основной текст</div>
    <div class="caption">Подпись к изображению</div>
  </v-col>
</v-row>

Работа с цветом текста

Цвет текста можно изменять через встроенные утилиты Vuetify. Используются классы вида text-[color]-[dark|lighten|accent]-[номер]. Например:

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

Пример:

<v-row>
  <v-col>
    <div class="text-primary">Основной цвет</div>
    <div class="text-success">Успешная операция</div>
    <div class="text-error">Ошибка</div>
  </v-col>
</v-row>

Компоненты для сложной трансформации текста

Vuetify позволяет использовать v-text-field и v-textarea для динамической работы с текстом. Они поддерживают привязку данных и могут быть использованы совместно с computed свойствами для мгновенной трансформации текста.

Пример изменения регистра через computed свойство:

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  computed: {
    upperText() {
      return this.inputText.toUpperCase();
    }
  }
}
</script>

<template>
  <v-row>
    <v-col>
      <v-text-field v-model="inputText" label="Введите текст"></v-text-field>
      <div class="text-uppercase">{{ upperText }}</div>
    </v-col>
  </v-row>
</template>

Работа с компонентом v-html

Для более сложных трансформаций, таких как форматирование текста с HTML-разметкой, можно использовать v-html. Он позволяет рендерить HTML-код, который может включать теги <strong>, <em>, <u> и другие.

Пример:

<v-row>
  <v-col>
    <div v-html="'<strong>Жирный</strong> и <em>курсив</em> текст'"></div>
  </v-col>
</v-row>

Использование директив и фильтров

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

Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.replace(/\b\w/g, function(l) { return l.toUpperCase() });
});

Применение фильтра в шаблоне:

<div>{{ 'текст для фильтра' | capitalize }}</div>

Адаптивные и динамические классы

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

<v-row>
  <v-col>
    <div :class="{'text-uppercase': isUppercase, 'text-lowercase': !isUppercase}">
      Динамический текст
    </div>
  </v-col>
</v-row>

<script>
export default {
  data() {
    return {
      isUppercase: true
    }
  }
}
</script>

Поддержка RTL и локализации

Vuetify корректно поддерживает Right-to-Left текст и локализацию. Для этого достаточно включить свойство rtl в конфигурации Vuetify и использовать соответствующие классы трансформации текста. Это особенно важно для языков с письмом справа налево, таких как арабский или иврит.

Использование шрифтов и кастомных стилей

Для полного контроля над текстом можно подключать сторонние шрифты через CSS и применять их через классы или inline-стили:

<v-row>
  <v-col>
    <div style="font-family: 'Roboto', sans-serif; font-weight: 700;">
      Пользовательский шрифт
    </div>
  </v-col>
</v-row>

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

Оглавление