English
English
简体中文
Contact Us
Register
Log In
layoutIndex

I18N

Last Updated on : 2022-03-01 07:55:04download

Overview

I18N is used to handle multiple languages in the panel.

Code demo

I18N handles the multiple languages in the panel in the following steps:

  1. Define multiple languages.

    Note: edit in the src/i18n/strings.{js,ts} file.

    // en and zh is required module.exports = { en: { hello: 'Hello', }, zh: { hello: '你好', } };
  2. Generate and export the multiple languages.

    import { I18N } from 'tuya-panel-kit'; const Strings = require('./strings'); module.exports = new I18N(Strings);
  3. Use the multiple languages.

    import Strings from '../i18n'; const localizedText = Strings.getLang('hello'); console.log(localizedText);
  4. Multilingual usage specification

Note:To understand the type of bitmap, please refer to How to use of bitmap?

module.exports = { en: { dsc_edit: 'Edit', // Basic multi language with dsc_ start and name it semantically dp_switch: 'Switch', // Datapoint (DP) related multi language should be in accordance with the `dp_${dpCode}` dp_switch_on: 'Switch is On', // Boolean type datapoint related multi language should be in accordance with the `dp_${dpCode}_${'on' || 'off'}` dp_mode_smart: 'Smart Mode', // Enum type datapoint related multi language should be in accordance with the `dp_${dpCode}_${enumValue}` dp_fault_0: 'Binary first bit is faulty', // Bitmap type datapoint related multi language should be in accordance with the `dp_${dpCode}_${bit}` dp_fault_1: 'Binary second bit is faulty', }, zh: { dsc_edit: '编辑', // 基础多语言以 dcs_ 开头并命名语义化即可 dp_switch: '开关', // 功能点(DP)相关多语言需按照 `dp_${dpCode}` 进行命名 dp_switch_on: '开关开', // 布尔类型功能点状态相关多语言需按照 `dp_${dpCode}_${'on' || 'off'}` 进行命名 dp_mode_smart: '智能模式', // 枚举类型功能点状态相关多语言需按照 `dp_${dpCode}_${enumValue}` 进行命名 dp_fault_0: '第一位故障', // Bitmap 类型功能点 状态相关多语言需按照 `dp_${dpCode}_${bit}` 进行命名 dp_fault_1: '第二位故障', } };

Method

getLang

/** * @desc Get basic multiple languages * @param {String} key–multilingual field * @returns {String} Specific multilingual value */ // en: Back; zh: return; // If not found: i18n@back; Strings.getLang('back'); // -> Strings.back

getDpLang

/** * @desc Obtain multiple languages of DP * @param {String} dpCode–dpCode name * @param {String|Number} value–DP value * @returns {String} Specific multilingual value */ // en: Mode1; zh: 模式1; // If not found: dp_mode_1; Strings.getDpLang('mode', 1); // -> Strings.dp_mode_1

formatValue

/** * @desc Splice the multiple languages * @param {String} key–multilingual field * @param {...String|Number} values–the value to be matched and replaced; there can be multiple values * @returns {String} Specific multilingual value */ // Define => en: "Turn on after {0}" zh: 设备将在{0}后开启 // Result => en: Turn on after 1 minute; zh: 设备将在1分钟后开启; Strings.formatValue('countdown_on', '1 minute');