RTL поддержка

Quasar Framework предоставляет встроенные возможности для работы с интерфейсами на языках с направлением текста справа налево (Right-to-Left, RTL), таких как арабский и иврит. Поддержка RTL охватывает как стили, так и компоненты, что позволяет создавать полноценные интерфейсы без дополнительной ручной настройки CSS.

Включение RTL

Для глобального включения RTL используется конфигурация Quasar. В проекте на Vue с Quasar можно задать направление текста при инициализации приложения:

import { createApp } from 'vue'
import { Quasar } from 'quasar'
import App from './App.vue'

const app = createApp(App)

app.use(Quasar, {
  config: {
    rtl: true
  }
})

app.mount('#app')
  • rtl: true – глобально активирует RTL для всех компонентов Quasar.
  • Изменение этого параметра динамически в рантайме также поддерживается через Quasar API.

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

Quasar позволяет изменять направление текста во время работы приложения:

import { useQuasar } from 'quasar'

const $q = useQuasar()

// Включение RTL
$q.lang.setRtl(true)

// Отключение RTL
$q.lang.setRtl(false)
  • Метод setRtl автоматически перестраивает стили и поведение компонентов.
  • Компоненты, такие как QLayout, QDrawer, QPage, корректно адаптируются к новому направлению.

Взаимодействие с Layout

Quasar Layout (QLayout) и связанные компоненты (QHeader, QDrawer, QPageContainer) полностью поддерживают RTL:

  • QDrawer меняет сторону, на которой отображается, автоматически отражая интерфейс справа налево.
  • Позиционирование кнопок и иконок в QHeader и QToolbar корректно адаптируется.
  • Поля ввода и формы автоматически переставляют элементы и текстовое выравнивание.

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

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat icon="menu" @click="toggleDrawer"/>
        <q-toolbar-title>RTL Пример</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="drawer" side="right" :overlay="true">
      <q-list>
        <q-item clickable v-for="item in menu" :key="item.label">
          <q-item-section>{{ item.label }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <q-page class="q-pa-md">
        <p>Контент приложения с поддержкой RTL.</p>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      menu: [
        { label: 'Главная' },
        { label: 'Настройки' },
        { label: 'Профиль' }
      ]
    }
  },
  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer
    }
  }
}
</script>
  • Атрибут side="right" у QDrawer используется автоматически, если включен RTL, что позволяет переключаться без изменения кода.
  • Компоненты меню и кнопки адаптируются под правостороннее направление.

Стилизация и кастомизация

Quasar автоматически переворачивает CSS-свойства, связанные с позиционированием (margin-left ↔︎ margin-right, padding-left ↔︎ padding-right).

  • Свойства, специфичные для LTR, можно переопределять через условные классы:
<div :class="$q.rtl ? 'rtl-class' : 'ltr-class'">
  Контент с индивидуальной адаптацией
</div>
  • Поддержка Flexbox и Grid в RTL также реализована через CSS-переворот направлений (flex-direction: row-reverse для RTL).

Компоненты, чувствительные к RTL

Некоторые компоненты Quasar автоматически меняют своё поведение под RTL:

Компонент Особенности в RTL
QBtn Иконка и текст меняют порядок отображения
QToolbar Позиционирование элементов внутри панели инструментов
QDrawer Перемещается на противоположную сторону
QPagination Кнопки навигации меняют порядок
QStepper Порядок шагов меняется справа налево
  • Для кастомных компонентов можно использовать реактивное свойство $q.rtl и применять соответствующие классы.

Локализация текста и чисел

RTL не ограничивается только визуальным переворотом. Quasar совместим с @quasar/lang для локализации чисел, дат и текста в соответствии с направлением языка:

import { Quasar } from 'quasar'
import langAr from 'quasar/lang/ar'

app.use(Quasar, {
  lang: langAr,
  config: { rtl: true }
})
  • Даты, валюты и другие локализуемые элементы автоматически форматируются под арабскую или ивритскую локаль.
  • Комбинация RTL и локализации обеспечивает полный интерфейсный опыт для пользователей правосторонних языков.

Особенности при интеграции с сторонними библиотеками

  • Если используются сторонние UI-компоненты, их стили могут не учитывать RTL. В таких случаях необходимо вручную применять CSS-переворот или использовать $q.rtl для условной стилизации.
  • При работе с графикой или кастомными анимациями также важно учитывать направление движения элементов.

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

  • Всегда включать RTL через конфигурацию Quasar, а не только через CSS. Это обеспечивает корректное поведение всех встроенных компонентов.
  • Использовать $q.rtl для условного рендеринга и стилизации пользовательских элементов.
  • Проверять адаптацию всех пользовательских компонентов, особенно если они используют абсолютное позиционирование или сторонние библиотеки.
  • Комбинировать RTL с локализацией для полноценного международного интерфейса.

Поддержка RTL в Quasar позволяет создавать качественные интерфейсы для правосторонних языков без значительных усилий по переписыванию CSS или компонентов, обеспечивая удобство как для разработчиков, так и для пользователей.

Оглавление