国際化

Graphic Walkerは組み込みの翻訳を含み、カスタム言語リソースをサポートしています。

組み込み言語

言語コード	言語
`en-US`	英語（デフォルト）
`zh-CN`	中国語（簡体字）
`ja-JP`	日本語

言語の設定

i18nLangプロパティを使用します:

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

カスタム翻訳

i18nResourcesプロパティを使用して独自の翻訳を提供します。リソースオブジェクトは言語コードをキーとし、ネストされた翻訳キーを持ちます:

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}
/>

組み込み翻訳のオーバーライド

翻訳全体を置き換えることなく、既存の言語の特定のキーをオーバーライドできます:

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

翻訳キーの検索

翻訳キーはドット記法の階層に従います。完全なキーセットはGraphic Walkerソースコード (opens in a new tab)で利用できます。翻訳可能な文字列の完全なリストについてはen-US.jsonファイルを確認してください。

例: 多言語アプリ

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>
  );
}