RTL поддержка

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

Настройка RTL в проекте

Для включения RTL необходимо задать соответствующую опцию при инициализации Vuetify. В версии 2.x и 3.x подход аналогичен:

import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  rtl: true, // включение RTL
})

export default vuetify

Ключевой момент: установка rtl: true автоматически адаптирует все встроенные компоненты Vuetify, включая сетку, карточки, кнопки, диалоговые окна и панели навигации.

Динамическое переключение направления

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

// Пример переключения RTL в реальном времени
const toggleRTL = () => {
  vuetify.framework.rtl = !vuetify.framework.rtl
}

После изменения свойства rtl все компоненты автоматически перестроят свое расположение, отражая новое направление текста.

RTL и сетка Vuetify

Система сетки Vuetify полностью поддерживает RTL. Основные правила:

  • Классы start и end меняют свои позиции в зависимости от направления. В LTR start выравнивает элементы слева, в RTL — справа.
  • justify-* и align-* автоматически подстраиваются, корректно инвертируя выравнивание по горизонтали.
  • Направление строк (v-row) в RTL инвертируется без необходимости дополнительных классов.

Пример:

<v-row justify="start">
  <v-col cols="6">Элемент 1</v-col>
  <v-col cols="6">Элемент 2</v-col>
</v-row>

В RTL Элемент 1 будет отображаться справа, а Элемент 2 — слева.

Компоненты и RTL

Кнопки и иконки

  • Иконки, встроенные в компоненты (v-btn, v-list-item), инвертируются автоматически при использовании свойства RTL.
  • При необходимости можно управлять положением иконки вручную через слоты prepend и append.

Диалоги и панели

  • Модальные окна (v-dialog) и боковые панели (v-navigation-drawer) корректно выравниваются по краю экрана. В RTL v-navigation-drawer по умолчанию открывается справа.

Текстовые поля и формы

  • Все поля ввода (v-text-field, v-textarea) автоматически выравниваются в соответствии с направлением текста.
  • Подсказки, ошибки и иконки адаптируются без дополнительного вмешательства.

Пользовательские компоненты и RTL

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

  • $vuetify.rtl — глобальное свойство для проверки текущего направления.
  • dir атрибут HTML — рекомендуется использовать на корневом элементе приложения:
<div :dir="$vuetify.rtl ? 'rtl' : 'ltr'">
  <custom-component />
</div>
  • CSS-переменные Vuetify (--v-spacing-start, --v-spacing-end) можно использовать для правильного позиционирования элементов с абсолютным или относительным позиционированием.

RTL и темы

В Vuetify 3 RTL полностью интегрируется с системой тем. Цветовые схемы, тени и размеры компонентов остаются неизменными, изменяется только расположение и направление элементов.

const vuetify = createVuetify({
  rtl: true,
  theme: {
    defaultTheme: 'dark',
  },
})

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

Практические советы

  1. Избегать абсолютного позиционирования слева/справа — использовать start и end вместо left и right.
  2. Стили для RTL писать через условные классы или CSS-переменные Vuetify.
  3. Иконки, стрелки и индикаторы должны быть адаптированы через слоты или SVG с изменением направления при переключении RTL.
  4. Тестировать интерфейс в обеих ориентациях на уровне компонентов и всей страницы, чтобы исключить визуальные ошибки.

Поддержка RTL в Vuetify позволяет создавать полноценные мультиязычные приложения без переписывания компонентов и адаптируется под динамическое переключение языков и направлений текста.

Оглавление