install
yarn add hf-i18n
component
<Language>
features
- support 中/英 切換
- support 切換語言的按鈕。
- support i18n init
API
- i18nInit function(languageList)
- languageList 參數: 資料型態:物件,其為語言檔的 path。語言的縮寫必須依照 i18n 的規範。
- Language 元件: API 無。
CSS
- language 的 font-size 使用 em 為單位,可在 language 外層設定 font-size。或改變.language-btn-wrap font-size 的屬性。
- .language-btn-wrap : 整個外包一層。
- .language-btn-wrap .submenu button : 下拉式選單的按鈕的 style
- .language-btn-wrap .submenu : 下拉式選單的 style
- .language-btn-wrap::after : 可設定 display:none 來隱藏垂直的分隔線。
使用方法
- 需要在 app 的進入點,index.js 中 import i18nInit,執行 i18nInit 函數,初始化 i18n。
- 在你的 header 中呼叫元件 Language。
Demo
//App.js;;;; Component { i18n; } { return <div className="App"> <Language /> <Translation> <p></p></Translation> </div> ; } ; //index.js(App的進入點);;;;;; //呼叫i18nInit; //英文的語言檔; //繁體的語言檔 ; //初始化i18nReactDOM; // If you want your app to work offline and load faster, you can change// unregister() to register() below. Note this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker;