useRtl

useRtl — это реактивная функция в библиотеке Vuetify, отвечающая за управление направлением интерфейса: слева направо (LTR) или справа налево (RTL). Она особенно важна при создании многоязычных приложений, где поддержка языков с письмом справа налево (например, арабский или иврит) требуется наравне с традиционным левосторонним расположением элементов.

Подключение и базовое использование

Чтобы использовать useRtl, необходимо импортировать его из Vuetify:

import { useRtl } from 'vuetify';

После импорта можно получить объект управления направлением интерфейса:

const rtl = useRtl();

Объект rtl содержит следующие ключевые свойства и методы:

  • isRtl — реактивная переменная, принимающая значение true при включенном режиме RTL и false при LTR.
  • rtl — более короткая алиасная форма, доступная для работы внутри компонентов.
  • setRtl(value: boolean) — функция для программного переключения направления интерфейса.

Пример программного переключения:

rtl.setRtl(true);  // Включает RTL
rtl.setRtl(false); // Возвращает LTR

Реактивность и интеграция с компонентами

useRtl полностью интегрирован с реактивной системой Vue. Изменения в rtl.isRtl автоматически обновляют визуальное отображение компонентов, использующих направление текста, включая VApp, VToolbar, VBtn, VCard и многие другие.

Пример реактивного использования в шаблоне:

<template>
  <v-app :class="{ 'rtl': rtl.isRtl }">
    <v-toolbar>
      <v-btn @click="toggleRtl">Переключить направление</v-btn>
    </v-toolbar>
    <v-card>
      <v-card-text>
        Текст внутри карты следует текущему направлению интерфейса
      </v-card-text>
    </v-card>
  </v-app>
</template>

<script setup>
import { useRtl } from 'vuetify';
import { ref } from 'vue';

const rtl = useRtl();

function toggleRtl() {
  rtl.setRtl(!rtl.isRtl);
}
</script>

<style>
.rtl {
  direction: rtl;
}
</style>

В этом примере переключение rtl.isRtl приводит к изменению класса rtl, что влияет на CSS-свойство direction. Благодаря этому все текстовые и визуальные компоненты корректно перестраиваются.

Использование с динамическими языками

Для приложений с поддержкой нескольких языков useRtl удобно интегрировать с библиотеками управления локализацией, например, vue-i18n. После смены языка можно автоматически менять направление интерфейса:

import { useI18n } from 'vue-i18n';
import { useRtl } from 'vuetify';

const { locale } = useI18n();
const rtl = useRtl();

watch(locale, (newLocale) => {
  rtl.setRtl(['ar', 'he', 'fa'].includes(newLocale));
});

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

Рекомендации по CSS и стилям

Хотя Vuetify автоматически применяет RTL к большинству компонентов, иногда необходимо вручную корректировать CSS для кастомных элементов:

  • Использовать direction: rtl для контейнеров текста и блоков с содержимым.
  • Применять text-align: right там, где требуется выравнивание текста по правому краю.
  • Проверять корректность отображения иконок, так как их расположение может потребовать отдельной адаптации при смене направления.

Особенности и ограничения

  • useRtl влияет на все компоненты Vuetify, зарегистрированные в текущем приложении.
  • При использовании сторонних библиотек или кастомных стилей необходимо контролировать согласованность CSS-направления с реактивным значением rtl.isRtl.
  • Переключение направления в рантайме безопасно, однако большие DOM-структуры могут потребовать повторного рендеринга для правильного отображения.

Интеграция с темами и глобальными настройками

useRtl может использоваться совместно с глобальной конфигурацией Vuetify:

import { createVuetify } from 'vuetify';

const vuetify = createVuetify({
  rtl: true, // включение RTL по умолчанию
});

Глобальное включение rtl задает начальное состояние для всех компонентов, но при этом useRtl сохраняет возможность динамического переключения внутри отдельных компонентов или страниц.

Вывод

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

Оглавление