Internationalisierung

Graphic Walker enthaelt integrierte Uebersetzungen und unterstuetzt benutzerdefinierte Sprachressourcen.

Integrierte Sprachen

Sprachcode	Sprache
`en-US`	Englisch (Standard)
`zh-CN`	Chinesisch (vereinfacht)
`ja-JP`	Japanisch

Sprache einstellen

Verwenden Sie die i18nLang-Prop:

<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="ja-JP"
/>

Benutzerdefinierte Uebersetzungen

Stellen Sie Ihre eigenen Uebersetzungen mit der i18nResources-Prop bereit. Das Ressourcenobjekt ist nach Sprachcode indiziert, mit verschachtelten Uebersetzungsschluesseln:

const customTranslations = {
  'fr-FR': {
    'main.tabpanel.DataSource': 'Source de données',
    'main.tabpanel.DataSource.btn': 'Ouvrir la source de données',
    'main.tabpanel.settings': 'Paramètres',
    // ... more keys
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="fr-FR"
  i18nResources={customTranslations}
/>

Integrierte Uebersetzungen ueberschreiben

Sie koennen bestimmte Schluessel in einer vorhandenen Sprache ueberschreiben, ohne die gesamte Uebersetzung zu ersetzen:

const overrides = {
  'en-US': {
    'main.tabpanel.DataSource': 'Data Input',
  },
};
 
<GraphicWalker
  data={data}
  fields={fields}
  i18nLang="en-US"
  i18nResources={overrides}
/>

Uebersetzungsschluessel finden

Uebersetzungsschluessel folgen einer Punkt-Notation-Hierarchie. Der vollstaendige Satz von Schluesseln ist im Graphic Walker-Quellcode (opens in a new tab) verfuegbar. Ueberpruefen Sie die en-US.json-Datei fuer die vollstaendige Liste uebersetzbare Zeichenketten.

Beispiel: Mehrsprachige App

import { useState } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
 
const LANGUAGES = [
  { code: 'en-US', label: 'English' },
  { code: 'zh-CN', label: '中文' },
  { code: 'ja-JP', label: '日本語' },
];
 
function App() {
  const [lang, setLang] = useState('en-US');
 
  return (
    <div>
      <select value={lang} onChange={e => setLang(e.target.value)}>
        {LANGUAGES.map(l => (
          <option key={l.code} value={l.code}>{l.label}</option>
        ))}
      </select>
 
      <GraphicWalker
        data={data}
        fields={fields}
        i18nLang={lang}
      />
    </div>
  );
}