RTL поддержка

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

Включение RTL в проекте

Для глобальной настройки направления текста используется провайдер config-provider. Этот компонент позволяет определить глобальные параметры интерфейса, включая direction.

Пример конфигурации RTL:

import { createApp, h } from 'vue'
import { create naive } from 'naive-ui'
import App from './App.vue'

const naive = createNaive()

createApp({
  render: () => h(App)
}).use(naive).mount('#app')

Чтобы активировать RTL, нужно использовать NConfigProvider с атрибутом direction:

import { NConfigProvider } from 'naive-ui'

export default {
  setup() {
    return () => (
      <NConfigProvider direction="rtl">
        <App />
      </NConfigProvider>
    )
  }
}

После этого все компоненты Naive UI автоматически наследуют направление справа налево, включая выравнивание текста, иконок, кнопок и панелей.

Локальная настройка RTL для отдельных компонентов

Не всегда требуется включать RTL глобально. Для отдельных компонентов можно задать параметр direction="rtl":

<NButton direction="rtl">Кнопка</NButton>

В этом случае только конкретная кнопка будет отображаться в RTL-режиме, а остальная часть интерфейса останется LTR (слева направо).

Влияние на стили и расположение элементов

RTL в Naive UI автоматически корректирует:

  • Выравнивание текста — text-align: right для элементов текста.
  • Порядок элементов внутри flex-контейнеров — элементы отображаются справа налево.
  • Иконки и стрелки — такие компоненты как NSelect, NDropdown, NCascader и NSlider корректно меняют направление стрелок и подсказок.
  • Панели и модальные окна — боковые панели, модальные окна и тултипы позиционируются с учётом RTL.

Работа с таблицами и сетками

Компоненты NDataTable и NGrid автоматически учитывают направление текста:

  • NDataTable: колонки по умолчанию выравниваются справа для RTL, сортировка и фильтры отображаются справа налево.
  • NGrid: порядок колонок внутри строки меняется на обратный при активной RTL-настройке.

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

<NDataTable
  columns={[
    { title: 'Имя', key: 'name' },
    { title: 'Возраст', key: 'age' }
  ]}
  data={[
    { name: 'Али', age: 25 },
    { name: 'Сара', age: 30 }
  ]}
  direction="rtl"
/>

Поддержка RTL с темами

Naive UI использует темизацию через createTheme, которая полностью совместима с RTL. При переключении направления все отступы, выравнивания и кастомные стили темы автоматически инвертируются.

import { createTheme, NConfigProvider } from 'naive-ui'

const theme = createTheme({
  common: {
    primaryColor: '#409EFF'
  }
})

<NConfigProvider theme={theme} direction="rtl">
  <App />
</NConfigProvider>

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

Naive UI поддерживает динамическое изменение направления через реактивный параметр. Например, используя ref из Vue:

import { ref } from 'vue'

const direction = ref('ltr')

// переключение направления
function toggleDirection() {
  direction.value = direction.value === 'ltr' ? 'rtl' : 'ltr'
}

<NConfigProvider :direction="direction">
  <App />
</NConfigProvider>

Все компоненты мгновенно реагируют на изменение и корректно адаптируют стиль без перезагрузки страницы.

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

  • Не все сторонние иконки автоматически меняются в RTL. В таких случаях требуется ручная ротация через CSS transform: scaleX(-1).
  • Кастомные компоненты, не использующие Naive UI сетку и стили, могут потребовать ручной корректировки направлений.
  • RTL влияет на анимации, особенно на выездные панели (slide-in) — Naive UI корректирует их направление, но для полностью кастомных анимаций нужно учитывать это отдельно.

Резюме

Naive UI обеспечивает полноценную RTL-поддержку через глобальный и локальный direction, динамическое переключение и интеграцию с темами. Это позволяет создавать интерфейсы для любых языков с письмом справа налево без необходимости ручного переопределения большинства стилей и логики расположения элементов.

Оглавление