Многоязычность и направление текста

MUI (Material-UI) предоставляет встроенные механизмы для многоязычности интерфейса через систему локализации (Localization). Основной инструмент для этого — компонент LocalizationProvider и объект локализации, который содержит переводы стандартных элементов, таких как кнопки календаря, элементы выбора даты и времени, а также компоненты с текстовыми подсказками.

Для подключения локализации необходимо импортировать соответствующую библиотеку локалей и передать её в LocalizationProvider. Пример для календаря:

import * as React from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import ruLocale from 'date-fns/locale/ru';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import TextField from '@mui/material/TextField';

export default function RussianDatePicker() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ruLocale}>
      <DatePicker
        label="Выберите дату"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
}

Ключевые моменты:

  • LocalizationProvider должен оборачивать компоненты, которым необходима локализация.
  • AdapterDateFns — адаптер для работы с библиотекой date-fns, поддерживающей различные локали.
  • Передача adapterLocale определяет язык интерфейса компонентов даты и времени.

Управление направлением текста

MUI поддерживает двунаправленный текст (LTR и RTL). Направление текста контролируется через тему (theme) с указанием свойства direction. Для приложений с арабским или ивритом это критично.

Создание темы с RTL:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import rtlPlugin from 'stylis-plugin-rtl';

const cacheRtl = createCache({
  key: 'mui-rtl',
  stylisPlugins: [rtlPlugin],
});

const theme = createTheme({
  direction: 'rtl',
});

export default function App() {
  return (
    <CacheProvider value={cacheRtl}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {/* Компоненты интерфейса */}
      </ThemeProvider>
    </CacheProvider>
  );
}

Особенности:

  • CacheProvider с stylis-plugin-rtl необходим для корректного отображения стилей в режиме RTL.
  • Свойство direction в теме управляет направлением текста глобально.
  • Компоненты MUI автоматически адаптируются к указанному направлению при правильной настройке темы.

Динамическая смена языка и направления

Для многоязычных приложений часто требуется динамическая смена локали и направления текста без перезагрузки страницы. Это достигается через управление состоянием темы и локализации.

Пример:

const [locale, setLocale] = React.useState(ruLocale);
const [direction, setDirection] = React.useState('ltr');

const theme = createTheme({
  direction: direction,
});

return (
  <CacheProvider value={direction === 'rtl' ? cacheRtl : cacheLtr}>
    <ThemeProvider theme={theme}>
      <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
        <CssBaseline />
        <DatePicker
          label="Выберите дату"
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
    </ThemeProvider>
  </CacheProvider>
);

Рекомендации по реализации:

  • Для смены локали хранить объект локали в состоянии или контексте React.
  • Для RTL/LTR использовать отдельные кэши Emotion (CacheProvider), чтобы стили корректно перестраивались.
  • Все компоненты, зависящие от локали, должны быть обернуты в LocalizationProvider после смены локали.

Комбинированная работа локализации и направления текста

При построении интерфейсов с поддержкой нескольких языков и направлений важно учитывать совместное влияние локализации и направления:

  1. Текстовые компоненты (Typography, Button, TextField) автоматически подстраиваются под направление темы.
  2. Компоненты даты и времени (DatePicker, TimePicker) требуют передачи локали через LocalizationProvider.
  3. Стилизация кастомных компонентов должна учитывать theme.direction для правильного отображения padding, margin и анимаций.
const StyledBox = styled(Box)(({ theme }) => ({
  paddingLeft: theme.direction === 'rtl' ? 0 : 16,
  paddingRight: theme.direction === 'rtl' ? 16 : 0,
}));

Таким образом, сочетание LocalizationProvider для языка и ThemeProvider с правильным направлением обеспечивает корректное отображение интерфейса на любом языке и с любым направлением текста, позволяя создавать полностью многоязычные и двунаправленные приложения на базе MUI.

Оглавление