Локализация

Виджет Editor поддерживает локализацию, позволяя разработчикам отображать метки, сообщения и подсказки на разных языках. Эта функция необходима в приложениях, ориентированных на пользователей, говорящих на разных языках. Локализация выполняется путём настройки виджета с пользовательским набором переводов.

Библиотека предоставляет три встроенные локали:

• Китайский
• Английский
• Немецкий

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

Локаль по умолчанию

По умолчанию применяется английская локаль:

Применение локалей

Чтобы применить встроенную локаль, импортируйте компонент Locale из "@svar-ui/react-core", пакет локали из "@svar-ui/core-locales" и встроенную локаль из "@svar-ui/editor-locales", затем добавьте атрибут words для нужного языка в компонент Locale.

Пример:

import { Locale } from "@svar-ui/react-core";
import { cn } from "@svar-ui/editor-locales";
import { cn as cnCore } from "@svar-ui/core-locales";
import { Editor } from "@svar-ui/react-editor";

export default function App() {
  return (
    <Locale words={{ ...cn, ...cnCore }}>
      <Editor />
    </Locale>
  );
}

Приведённая конфигурация позволяет виджету Editor отображать текст на немецком языке. Объект myLang содержит пары ключ-значение, где ключами являются строки по умолчанию на английском языке, используемые в Editor, а значениями — их переводы на немецкий. Компонент Locale оборачивает Editor и применяет указанные переводы.

import { Locale } from "@svar-ui/react-core";
import { Editor } from "@svar-ui/react-editor";
import "@svar-ui/react-editor/all.css";

const myLang = {
  "This field is required": "Dieses Feld ist erforderlich",
  "Invalid value": "Ungültiger Wert",
  Yes: "Ja",
  No: "Nein",
  Save: "Speichern",
  Cancel: "Abbrechen",
};

export default function App() {
  return (
    <Locale words={{ editor: myLang }}>
      <Editor />
    </Locale>
  );
}

Чтобы применить пользовательскую локаль, необходимо создать объект для неё (или изменить существующий) и предоставить переводы для всех текстовых меток Editor (на любом нужном языке). Также необходимо добавить метки из компонентов core и calendar ("@svar-ui/core-locales"). Подробнее см. в разделе Локализация Core.

Пример для корейского языка:

const ko = {
  editor: {
    "Invalid value": "잘못된 값",
    // other editor translations...
  },
  core: { /* ... core translations ... */ },
  calendar: { /* ... calendar translations ... */ },
};

Связанный пример: Locales