RTL поддержка

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

Включение RTL режима

Для глобального применения RTL необходимо воспользоваться свойством configProvider или глобальной настройкой ElConfigProvider. В базовом случае это выглядит так:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
  locale: {/* выбранный язык */},
  zIndex: 3000,
  // Включение RTL
  rtl: true
})

app.mount('#app')

Ключевой момент: после включения rtl: true все компоненты Element Plus автоматически переключаются на правостороннее отображение. Это затрагивает панели, формы, таблицы, кнопки и модальные окна.

Переключение RTL динамически

Element Plus позволяет менять направление интерфейса в процессе работы приложения. Для этого используется глобальный метод useGlobalConfig:

import { useGlobalConfig } from 'element-plus'

const globalConfig = useGlobalConfig()
globalConfig.rtl = true  // включение RTL
globalConfig.rtl = false // возвращение к LTR

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

Влияние на компоненты

RTL влияет на несколько ключевых аспектов работы компонентов:

  1. Выравнивание текста и элементов

    • ElInput, ElSelect, ElTable автоматически меняют выравнивание текста на правое.
    • Паддинги, маргины и позиции иконок корректируются под RTL.

  2. Направление анимаций и стрелок

    • Компоненты с выпадающими списками (ElDropdown, ElPopover) изменяют направление анимации.
    • Стрелки в каруселях и пагинации меняют ориентацию.

  3. Flex и Grid компоненты

    • Встроенные классы Grid и Flex корректируют направление flex-direction и порядок колонок.
    • ElRow и ElCol автоматически учитывают RTL при расчёте смещений и выравнивания.

  4. Иконки и символы

    • Иконки, указывающие направление (el-icon-arrow-left, el-icon-arrow-right) меняются на противоположные при активации RTL.

Настройка пользовательских стилей под RTL

Для компонентов, использующих кастомные стили, важно учитывать специальный селектор [dir="rtl"]. Element Plus добавляет атрибут dir="rtl" на корневой элемент при включении RTL, что позволяет применять CSS-правила:

/* Переопределение отступов для RTL */
[dir="rtl"] .custom-button {
  margin-left: 10px;
  margin-right: 0;
}

/* Изменение выравнивания текста */
[dir="rtl"] .custom-label {
  text-align: right;
}

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

Интеграция с i18n

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

import { useI18n } from 'vue-i18n'
import { useGlobalConfig } from 'element-plus'

const { locale } = useI18n()
const globalConfig = useGlobalConfig()

function switchLanguage(lang) {
  locale.value = lang
  globalConfig.rtl = lang === 'ar' || lang === 'he'
}

Такой подход обеспечивает автоматическое соответствие направления текста и компонентов выбранному языку, без необходимости вручную управлять стилями и позициями элементов.

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

  • RTL полностью поддерживается всеми основными компонентами, но кастомные компоненты, созданные без учета dir="rtl", требуют отдельного стилирования.
  • Компоненты, использующие абсолютное позиционирование, могут потребовать ручной корректировки.
  • Для корректной работы анимаций важно использовать встроенные классы Element Plus и избегать жесткого переопределения CSS-свойств, связанных с направлением (left, right).

RTL поддержка в Element Plus позволяет создавать профессиональные интерфейсы для пользователей с правосторонними языками, обеспечивая адаптивное выравнивание элементов, корректное отображение иконок, анимаций и текстов без дополнительных библиотек. При правильной конфигурации и сочетании с i18n можно динамически переключать направление интерфейса и полностью управлять многоязычным опытом пользователя.

Оглавление