Классы цветов текста

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

Структура классов цвета текста

Классы цвета текста имеют следующую структуру:

text-[color]-[shade]
  • text — префикс, указывающий на применение к тексту.
  • [color] — базовый цвет из палитры Vuetify (primary, secondary, success, error, warning, info и другие стандартные цвета Material Design).
  • [shade] — оттенок цвета, числовое значение от lighten-5 до darken-4 или accent-1 до accent-4.

Примеры:

Основной текст
Темно-зеленый текст
Ярко-красный текст

Использование стандартных цветов

Vuetify предоставляет набор стандартных цветов Material Design:

  • primary — основной цвет темы.
  • secondary — дополнительный цвет.
  • success — зеленый для обозначения успеха.
  • info — синий для информационных сообщений.
  • warning — оранжевый для предупреждений.
  • error — красный для ошибок.

Каждый из этих цветов может быть модифицирован через оттенки lighten, darken и accent.

Светло-оранжевый текст предупреждения


Темно-синий информационный текст

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

  • Lighten — делает цвет светлее. Например, lighten-1 чуть светлее базового цвета, lighten-5 — почти пастельный оттенок.
  • Darken — делает цвет темнее. Например, darken-1 — немного темнее, darken-4 — максимально насыщенный темный оттенок.
  • Accent — яркий акцентный оттенок, чаще используется для элементов интерфейса, чтобы привлечь внимание.

Примеры:

Светло-синий текст
Темно-фиолетовый текст
Ярко-зеленый акцент

Прозрачность текста

Vuetify поддерживает изменение прозрачности текста с помощью модификатора opacity. Формат:

text-[color]--[shade]-[opacity]
  • [opacity] — числовое значение от 1 до 9, где 1 почти прозрачный, а 9 почти полностью непрозрачный.

Примеры:

Полупрозрачный красный текст


Почти полностью непрозрачный синий текст

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

Цветовые классы можно применять к любым компонентам Vuetify: v-btn, v-card, v-alert, v-icon, v-toolbar и другим. Это позволяет быстро стандартизировать внешний вид текста без кастомного CSS.

Сохранить

  Текст внутри карточки

mdi-alert

Наследование цвета текста

Если цвет применяется к родительскому элементу, дочерние элементы автоматически наследуют этот цвет, если не переопределён другим классом:


  
Этот текст унаследует синий цвет

  
Этот текст перекроет цвет и станет красным

Динамическая установка цвета текста через Vue

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


  {{ message }}

data() {
  return {
    isSuccess: true,
    message: 'Статус выполнения'
  }
}

Это позволяет менять цвет текста в зависимости от состояния приложения.

Цвет текста и темы Vuetify

Цвета текста интегрированы с темами Vuetify, что делает приложение полностью адаптивным к светлой и тёмной теме. Использование text-primary, text-secondary и других стандартных классов автоматически учитывает текущую тему.

Текст с цветом темы


Дополнительный текст с цветом темы

В тёмной теме эти цвета будут автоматически корректироваться, обеспечивая достаточный контраст и читаемость.

Оглавление