Интерфейсы современных веб-приложений часто требуют поддержки нескольких языков. Компоненты библиотеки Ant Design по умолчанию используют английский язык для текстовых элементов интерфейса: надписей в таблицах, подсказок календаря, текстов кнопок пагинации, сообщений в пустых состояниях и других элементов.
Языковые пакеты позволяют изменить эти встроенные тексты на любой поддерживаемый язык. Это особенно важно для:
В Ant Design механизм локализации построен на использовании
специальных объектов локали, которые передаются через компонент
ConfigProvider. Этот компонент распространяет настройки
локализации на все вложенные компоненты интерфейса.
Механизм локализации состоит из нескольких элементов:
1. Языковые файлы (locale packages) Файлы локализации содержат переводы стандартных текстов компонентов.
2. Компонент ConfigProvider Глобальный контейнер конфигурации, через который передаются настройки локали.
3. Поддержка date-библиотек Компоненты, связанные с
датой и временем (DatePicker, Calendar,
TimePicker), используют локализацию внешней библиотеки
дат.
Общая схема работы:
Языковой пакет → ConfigProvider → Все компоненты Ant DesignТаким образом, достаточно один раз определить локаль на уровне приложения, чтобы все компоненты автоматически использовали нужный язык.
Ant Design поставляется с большим набором готовых локалей. Они располагаются в каталоге:
antd/es/localeКаждый файл соответствует конкретному языку.
Пример подключения русского языка:
import ruRU from 'antd/es/locale/ru_RU';Другой распространённый способ импорта:
import ruRU from 'antd/lib/locale/ru_RU';Оба варианта работают, однако использование пути es
предпочтительнее в современных сборщиках, так как поддерживает
оптимизацию tree-shaking.
После импорта языкового пакета необходимо передать его в компонент
ConfigProvider.
Пример базовой настройки:
import React from 'react';
import { ConfigProvider, DatePicker } from 'antd';
import ruRU from 'antd/es/locale/ru_RU';
function App() {
return (
<ConfigProvider locale={ruRU}>
<DatePicker />
</ConfigProvider>
);
}
export default App;В этом случае:
ConfigProviderИзменения затрагивают:
Рассмотрим компонент Pagination.
Без локализации отображается английский интерфейс:
Items per page
Jump toПосле подключения русского пакета:
Элементов на странице
ПерейтиАналогичные изменения происходят в:
TableCalendarDatePickerModalUploadEmptyКаждый компонент содержит собственные текстовые элементы, которые автоматически заменяются переводом из языкового пакета.
Ant Design поддерживает десятки языков. Наиболее часто используемые локали:
| Язык | Импорт |
|---|---|
| Русский | ru_RU |
| Английский | en_US |
| Китайский | zh_CN |
| Испанский | es_ES |
| Французский | fr_FR |
| Немецкий | de_DE |
| Японский | ja_JP |
| Корейский | ko_KR |
| Итальянский | it_IT |
Пример подключения французского языка:
import frFR from 'antd/es/locale/fr_FR';Компоненты работы с датой используют локаль библиотеки дат. В зависимости от версии Ant Design используется:
Если локализовать только Ant Design, но не библиотеку дат, календарь может отображать месяцы на английском языке.
Пример настройки с dayjs:
import 'dayjs/locale/ru';
import dayjs from 'dayjs';
dayjs.locale('ru');После этого:
будут соответствовать выбранной локали.
Пример структуры приложения с локализацией:
import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider, DatePicker, Pagination } from 'antd';
import ruRU from 'antd/es/locale/ru_RU';
import 'dayjs/locale/ru';
import dayjs from 'dayjs';
dayjs.locale('ru');
function App() {
return (
<ConfigProvider locale={ruRU}>
<DatePicker />
<Pagination total={500} />
</ConfigProvider>
);
}
ReactDOM.render(<App />, document.getElementById('root'));После выполнения этих настроек:
Иногда требуется использовать разные языки в разных частях
интерфейса. Это достигается созданием нескольких
ConfigProvider.
Пример:
<ConfigProvider locale={ruRU}>
<RussianPanel />
</ConfigProvider>
<ConfigProvider locale={enUS}>
<EnglishPanel />
</ConfigProvider>Каждый ConfigProvider влияет только на вложенные
компоненты.
Это позволяет:
Во многих приложениях язык интерфейса выбирается пользователем. В таком случае локаль хранится в состоянии приложения.
Пример:
import React, { useState } from 'react';
import { ConfigProvider, Button } from 'antd';
import ruRU from 'antd/es/locale/ru_RU';
import enUS from 'antd/es/locale/en_US';
function App() {
const [locale, setLocale] = useState(ruRU);
return (
<ConfigProvider locale={locale}>
<Button onCl ick={() => setLocale(enUS)}>
Switch language
</Button>
</ConfigProvider>
);
}При изменении состояния locale все компоненты
автоматически перерисовываются с новой локализацией.
Иногда стандартного перевода недостаточно. В таких случаях создаётся собственный объект локализации.
Пример:
const customLocale = {
...ruRU,
Pagination: {
items_per_page: 'записей'
}
};Использование:
<ConfigProvider locale={customLocale}>
<App />
</ConfigProvider>Этот подход позволяет:
Языковой пакет представляет собой объект с переводами для различных компонентов.
Упрощённая структура:
{
locale: 'ru',
Pagination: { ... },
DatePicker: { ... },
Table: { ... },
Modal: { ... },
Popconfirm: { ... },
Transfer: { ... },
Upload: { ... },
Empty: { ... }
}Каждый раздел содержит строки, которые используются соответствующим компонентом.
Такое разделение делает систему локализации:
1. Локаль подключена, но календарь на английском
Причина — не настроена локализация библиотеки дат.
Решение — подключить locale для dayjs или
moment.
2. ConfigProvider расположен слишком глубоко
Если ConfigProvider находится внутри одного компонента,
локаль будет применяться только к его потомкам.
Правильное решение — размещать его на верхнем уровне приложения.
3. Неверный путь импорта
Некоторые сборщики требуют импорт именно из antd/es.
Неправильный путь может привести к увеличению размера сборки.
Подключение языковых пакетов позволяет:
В крупных приложениях локализация является обязательной частью архитектуры интерфейса и интегрируется вместе с системами перевода, такими как i18n-библиотеки.