{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/other/locale","result":{"data":{"current":{"frontmatter":{"title":"LocaleProvider 多语言","order":96,"brief":"国际化组件，为 Semi 组件提供多语言支持","icon":"doc-i18n"},"fields":{"type":"other"},"tableOfContents":{"items":[{"url":"#目前支持语言","title":"目前支持语言"},{"url":"#已支持组件","title":"已支持组件"},{"url":"#使用","title":"使用"},{"url":"#代码示例","title":"代码示例","items":[{"url":"#国际化","title":"国际化"},{"url":"#自定义国际化组件","title":"自定义国际化组件"},{"url":"#支持多语言的组件","title":"支持多语言的组件"}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"zh-CN\",\n \"order\": 96,\n \"category\": \"其他\",\n \"title\": \"LocaleProvider 多语言\",\n \"icon\": \"doc-i18n\",\n \"dir\": \"column\",\n \"brief\": \"国际化组件，为 Semi 组件提供多语言支持\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u76EE\\u524D\\u652F\\u6301\\u8BED\\u8A00\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u6700\\u4F4E\\u652F\\u6301\\u7248\\u672C\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8BED\\u8A00\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v0.0.1\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7B80\\u4F53\\u4E2D\\u6587: zh_CN\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v0.7.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u82F1\\u8BED: en_GB\\u3001\\u65E5\\u8BED: ja_JP\\u3001\\u97E9\\u8BED: ko_KR\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v1.8.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u963F\\u62C9\\u4F2F\\u8BED: ar\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v1.11.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8D8A\\u5357\\u8BED: vi_VN\\u3001\\u4FC4\\u7F57\\u65AF\\u8BED: ru_RU\\u3001\\u5370\\u5C3C\\u8BED: id_ID\\u3001\\u9A6C\\u6765\\u8BED: ms_MY\\u3001\\u6CF0\\u8BED: th_TH\\u3001\\u571F\\u8033\\u5176\\u8BED: tr_TR\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v1.17.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u8461\\u8404\\u7259\\u8BED\\uFF08\\u5DF4\\u897F\\uFF09: pt_BR\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v1.28.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7E41\\u4F53\\u4E2D\\u6587: zh_TW\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.2.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u897F\\u73ED\\u7259\\u8BED: es\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.15.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u610F\\u5927\\u5229\\u8BED: it\\u3001\\u6CD5\\u8BED\\uFF1Afr\\u3001\\u5FB7\\u8BED\\uFF1Ade\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.21.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u7F57\\u9A6C\\u5C3C\\u4E9A\\u8BED: ro\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.29.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u745E\\u5178\\u8BED\\uFF1A sv_SE\\u3001\\u6CE2\\u5170\\u8BED\\uFF1A pl_PL\\u3001\\u8377\\u5170\\u8BED\\uFF1A nl_NL\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"v2.88.0\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"\\u963F\\u585E\\u62DC\\u7586\\u8BED\\uFF1Aaz\\u3001\\u4FDD\\u52A0\\u5229\\u4E9A\\u8BED\\uFF1Abg\\u3001\\u52A0\\u6CF0\\u7F57\\u5C3C\\u4E9A\\u8BED\\uFF1Aca\\u3001\\u6377\\u514B\\u8BED\\uFF1Acs_CZ\\u3001\\u5BBF\\u52A1\\u8BED\\uFF1Aceb_PH\\u3001\\u4E39\\u9EA6\\u8BED\\uFF1A da\\u3001\\u5E0C\\u814A\\u8BED\\uFF1Ael_GR\\u3001\\u897F\\u73ED\\u7259\\u8BED\\uFF08\\u62C9\\u7F8E\\uFF09\\uFF1Aes_419\\u3001\\u7231\\u6C99\\u5C3C\\u4E9A\\u8BED\\uFF1Aet\\u3001\\u6CE2\\u65AF\\u8BED\\uFF1Afa_IR\\u3001\\u83F2\\u5F8B\\u5BBE\\u8BED\\uFF1Afil_PH\\u3001\\u82AC\\u5170\\u8BED\\uFF1A fi_FI\\u3001\\u6CD5\\u8BED\\uFF08\\u52A0\\uFF09\\uFF1Afr_CA\\u3001\\u7231\\u5C14\\u5170\\u8BED\\uFF1Aga\\u3001\\u5E0C\\u4F2F\\u6765\\u8BED\\uFF1Ahe_IL\\u3001\\u5370\\u5730\\u8BED\\uFF1Ahi_IN\\u3001\\u514B\\u7F57\\u5730\\u4E9A\\u8BED\\uFF1Ahr\\u3001\\u5308\\u7259\\u5229\\u8BED\\uFF1Ahu_HU\\u3001\\u51B0\\u5C9B\\u8BED\\uFF1Ais\\u3001\\u722A\\u54C7\\u8BED\\uFF1Ajv_ID\\u3001\\u54C8\\u8428\\u514B\\u8BED\\uFF1Akk\\u3001\\u9AD8\\u68C9\\u8BED\\uFF1Akm_KH\\u3001\\u7ACB\\u9676\\u5B9B\\u8BED\\uFF1Alt\\u3001\\u62C9\\u8131\\u7EF4\\u4E9A\\u8BED\\uFF1Alv\\u3001\\u7F05\\u7538\\u8BED\\uFF1Amy_MM\\u3001\\u632A\\u5A01\\u8BED\\uFF1A nb\\u3001\\u8461\\u8404\\u7259\\u8BED\\uFF1Apt\\u3001\\u65AF\\u6D1B\\u4F10\\u514B\\u8BED\\uFF1Ask\\u3001\\u65AF\\u6D1B\\u6587\\u5C3C\\u4E9A\\u8BED\\uFF1Asl\\u3001\\u963F\\u5C14\\u5DF4\\u5C3C\\u4E9A\\u8BED\\uFF1Asq\\u3001\\u65AF\\u74E6\\u5E0C\\u91CC\\u8BED\\uFF1Asw\\u3001\\u4E4C\\u514B\\u5170\\u8BED\\uFF1Auk_UA\\u3001\\u4E4C\\u5C14\\u90FD\\u8BED\\uFF1Aur\\u3001\\u4E4C\\u5179\\u522B\\u514B\\u8BED\\uFF1Auz\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u5DF2\\u652F\\u6301\\u7EC4\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u76EE\\u524D\\u6709\\u4EE5\\u4E0B\\u7EC4\\u4EF6\\u5B58\\u5728\\u5185\\u7F6E\\u9ED8\\u8BA4\\u6587\\u672C\\uFF0C\\u5747\\u5DF2\\u5B9E\\u73B0\\u56FD\\u9645\\u5316\\u591A\\u8BED\\u8A00\\u9002\\u914D\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"Calendar\\u3001Cascader\\u3001Chat\\u3001DatePicker\\u3001Form\\u3001Image\\u3001List\\u3001List\\u3001Modal\\u3001Navigation\\u3001Nav\\u3001Pagination\\u3001Popconfirm\\u3001Select\\u3001Table\\u3001TimePicker\\u3001Transfer\\u3001Tree\\u3001TreeSelect\\u3001Typography\\u3001Upload\")), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4F7F\\u7528\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"LocaleProvider \\u4F7F\\u7528\\u4E86 React \\u7684 context \\u4E0A\\u4E0B\\u6587\\u7279\\u6027\\uFF0C\\u4F60\\u53EA\\u9700\\u8981\\u5728\\u5E94\\u7528\\u5916\\u56F4\\u5305\\u88F9\\u4E00\\u6B21\\u5373\\u53EF\\u5168\\u5C40\\u751F\\u6548\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u5F53\\u9700\\u8981\\u5207\\u6362\\u8BED\\u8A00\\u65F6\\uFF0C\\u76F4\\u63A5\\u5207\\u6362 props \\u4F20\\u5165\\u7684 locale \\u5373\\u53EF\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"hideInDSM\",\n \"hideInDSM\": true\n }, \"import React, { useCallback, useMemo, useState } from 'react';\\nimport zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\nimport en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';\\nimport ko_KR from '@douyinfe/semi-ui/lib/es/locale/source/ko_KR';\\nimport ja_JP from '@douyinfe/semi-ui/lib/es/locale/source/ja_JP';\\nimport vi_VN from '@douyinfe/semi-ui/lib/es/locale/source/vi_VN';\\nimport ru_RU from '@douyinfe/semi-ui/lib/es/locale/source/ru_RU';\\nimport id_ID from '@douyinfe/semi-ui/lib/es/locale/source/id_ID';\\nimport ms_MY from '@douyinfe/semi-ui/lib/es/locale/source/ms_MY';\\nimport th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';\\nimport tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';\\nimport pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';\\nimport zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';\\nimport sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';\\nimport pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';\\nimport nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';\\nimport ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';\\nimport es from '@douyinfe/semi-ui/lib/es/locale/source/es';\\nimport it from '@douyinfe/semi-ui/lib/es/locale/source/it';\\nimport de from '@douyinfe/semi-ui/lib/es/locale/source/de';\\nimport fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';\\nimport ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';\\n\\nimport { LocaleProvider } from '@douyinfe/semi-ui';\\n\\n// \\u5728locale\\u4E2D\\u4F20\\u5165\\u76F8\\u5E94\\u7684\\u8BED\\u8A00\\u5305\\u5373\\u53EF\\n() => {\\n return (\\n \\n {/* eslint-disable-next-line react/jsx-no-undef */}\\n \\n \\n );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"\\u4EE3\\u7801\\u793A\\u4F8B\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u56FD\\u9645\\u5316\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\nimport ja_JP from '@douyinfe/semi-ui/lib/es/locale/source/ja_JP';\\nimport { LocaleProvider, Pagination } from '@douyinfe/semi-ui';\\n\\nfunction I18nDemo() {\\n return (\\n <>\\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u81EA\\u5B9A\\u4E49\\u56FD\\u9645\\u5316\\u7EC4\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5F53\\u4F60\\u7684\\u81EA\\u5B9A\\u4E49\\u7EC4\\u4EF6\\uFF0C\\u4E5F\\u5E0C\\u671B\\u6D88\\u8D39 Semi LocaleProvider Context \\u4E2D\\u7684 localeCode \\u6216\\u8005\\u8BFB\\u53D6\\u5177\\u4F53\\u67D0\\u4E2A\\u7EC4\\u4EF6\\u7684 i18n \\u6587\\u672C localeData\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4F7F\\u7528 LocaleConsumer \\u8FDB\\u884C\\u83B7\\u53D6\\uFF1B\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" noInline=true\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"noInline\": \"true\"\n }, \"import React from 'react';\\nimport zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\nimport ko_KR from '@douyinfe/semi-ui/lib/es/locale/source/ko_KR';\\nimport { LocaleProvider, LocaleConsumer } from '@douyinfe/semi-ui';\\n\\n\\nfunction GetLocaleFromSemi() {\\n return (\\n \\n {(localeData, localeCode, dateFnsLocale) => (\\n
{localeCode} : {localeData.begin}
\\n )}\\n \\n );\\n}\\n\\nfunction ExtractComponent() {\\n return (\\n \\n {(localeData, localeCode, dateFnsLocale) => (\\n
{localeData.customKey}
\\n )}\\n \\n );\\n}\\n\\n\\nfunction I18nCustomDemo() {\\n const new_zh_CN = { ...zh_CN, ComponentA: { customKey: 'semi' } };\\n const new_ko_KR = { ...ko_KR, ComponentA: { customKey: 'design' } };\\n const new_en_GB = { ...en_GB, ComponentA: { customKey: 'dsm' } };\\n\\n return (\\n <>\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\nrender(I18nCustomDemo);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"\\u652F\\u6301\\u591A\\u8BED\\u8A00\\u7684\\u7EC4\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u793A\\u4F8B\\u7ED9\\u51FA\\u4E86\\u76EE\\u524D\\u6240\\u6709\\u652F\\u6301\\u591A\\u8BED\\u8A00\\u7684\\u7EC4\\u4EF6\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"\\u5F53\\u4F60\\u7684\\u7F51\\u7AD9\\u6709RTL\\u9002\\u914D\\u9700\\u6C42\\u65F6\\uFF0C\\u63A8\\u8350\\u76F4\\u63A5\\u4F7F\\u7528ConfigProvider\\uFF0C\\u9664\\u4E86\\u53EF\\u914D\\u7F6Elocale\\u5916\\uFF0C\\u8FD8\\u53EF\\u4EE5\\u76F4\\u63A5\\u540C\\u65F6\\u914D\\u7F6Edirection='rtl'/'ltr'\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"\\u82E5\\u65E0RTL\\u9002\\u914D\\u9700\\u6C42\\uFF0C\\u76F4\\u63A5\\u4F7F\\u7528LocaleProvider\\u5373\\u53EF\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\" hideInDSM\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\",\n \"hideInDSM\": true\n }, \"import React from 'react';\\nimport zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';\\nimport en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';\\nimport en_US from '@douyinfe/semi-ui/lib/es/locale/source/en_US';\\nimport ko_KR from '@douyinfe/semi-ui/lib/es/locale/source/ko_KR';\\nimport ja_JP from '@douyinfe/semi-ui/lib/es/locale/source/ja_JP';\\nimport ar from '@douyinfe/semi-ui/lib/es/locale/source/ar';\\nimport vi_VN from '@douyinfe/semi-ui/lib/es/locale/source/vi_VN';\\nimport ru_RU from '@douyinfe/semi-ui/lib/es/locale/source/ru_RU';\\nimport id_ID from '@douyinfe/semi-ui/lib/es/locale/source/id_ID';\\nimport ms_MY from '@douyinfe/semi-ui/lib/es/locale/source/ms_MY';\\nimport th_TH from '@douyinfe/semi-ui/lib/es/locale/source/th_TH';\\nimport tr_TR from '@douyinfe/semi-ui/lib/es/locale/source/tr_TR';\\nimport pt_BR from '@douyinfe/semi-ui/lib/es/locale/source/pt_BR';\\nimport zh_TW from '@douyinfe/semi-ui/lib/es/locale/source/zh_TW';\\nimport sv_SE from '@douyinfe/semi-ui/lib/es/locale/source/sv_SE';\\nimport pl_PL from '@douyinfe/semi-ui/lib/es/locale/source/pl_PL';\\nimport nl_NL from '@douyinfe/semi-ui/lib/es/locale/source/nl_NL';\\nimport es from '@douyinfe/semi-ui/lib/es/locale/source/es';\\nimport it from '@douyinfe/semi-ui/lib/es/locale/source/it';\\nimport de from '@douyinfe/semi-ui/lib/es/locale/source/de';\\nimport fr from '@douyinfe/semi-ui/lib/es/locale/source/fr';\\nimport ro from '@douyinfe/semi-ui/lib/es/locale/source/ro';\\nimport az from '@douyinfe/semi-ui/lib/es/locale/source/az';\\nimport bg from '@douyinfe/semi-ui/lib/es/locale/source/bg';\\nimport bn_IN from '@douyinfe/semi-ui/lib/es/locale/source/bn_IN'; \\nimport ca from '@douyinfe/semi-ui/lib/es/locale/source/ca';\\nimport cs_CZ from '@douyinfe/semi-ui/lib/es/locale/source/cs_CZ';\\nimport ceb_PH from '@douyinfe/semi-ui/lib/es/locale/source/ceb_PH';\\nimport da from '@douyinfe/semi-ui/lib/es/locale/source/da';\\nimport el_GR from '@douyinfe/semi-ui/lib/es/locale/source/el_GR';\\nimport es_419 from '@douyinfe/semi-ui/lib/es/locale/source/es_419';\\nimport et from '@douyinfe/semi-ui/lib/es/locale/source/et';\\nimport fa_IR from '@douyinfe/semi-ui/lib/es/locale/source/fa_IR';\\nimport fil_PH from '@douyinfe/semi-ui/lib/es/locale/source/fil_PH';\\nimport fi_FI from '@douyinfe/semi-ui/lib/es/locale/source/fi_FI';\\nimport fr_CA from '@douyinfe/semi-ui/lib/es/locale/source/fr_CA';\\nimport ga from '@douyinfe/semi-ui/lib/es/locale/source/ga';\\nimport he_IL from '@douyinfe/semi-ui/lib/es/locale/source/he_IL';\\nimport hi_IN from '@douyinfe/semi-ui/lib/es/locale/source/hi_IN';\\nimport hr from '@douyinfe/semi-ui/lib/es/locale/source/hr';\\nimport hu_HU from '@douyinfe/semi-ui/lib/es/locale/source/hu_HU';\\nimport is from '@douyinfe/semi-ui/lib/es/locale/source/is';\\nimport jv_ID from '@douyinfe/semi-ui/lib/es/locale/source/jv_ID';\\nimport kk from '@douyinfe/semi-ui/lib/es/locale/source/kk';\\nimport km_KH from '@douyinfe/semi-ui/lib/es/locale/source/km_KH';\\nimport lt from '@douyinfe/semi-ui/lib/es/locale/source/lt';\\nimport lv from '@douyinfe/semi-ui/lib/es/locale/source/lv';\\nimport my_MM from '@douyinfe/semi-ui/lib/es/locale/source/my_MM';\\nimport nb from '@douyinfe/semi-ui/lib/es/locale/source/nb';\\nimport pt from '@douyinfe/semi-ui/lib/es/locale/source/pt';\\nimport sk from '@douyinfe/semi-ui/lib/es/locale/source/sk';\\nimport sl from '@douyinfe/semi-ui/lib/es/locale/source/sl';\\nimport sq from '@douyinfe/semi-ui/lib/es/locale/source/sq';\\nimport sw from '@douyinfe/semi-ui/lib/es/locale/source/sw';\\nimport uk_UA from '@douyinfe/semi-ui/lib/es/locale/source/uk_UA';\\nimport ur from '@douyinfe/semi-ui/lib/es/locale/source/ur';\\nimport uz from '@douyinfe/semi-ui/lib/es/locale/source/uz';\\nimport { LocaleProvider, ConfigProvider, Pagination, Modal, Button, Select, Cascader, DatePicker, TreeSelect, Table, TimePicker, List, Calendar, Typography, Transfer, ImagePreview, Image, Form, Nav } from '@douyinfe/semi-ui';\\nimport { IconUser, IconSemiLogo, IconStar } from '@douyinfe/semi-icons';\\n\\nfunction I18nDemo() {\\n const [locale, setLocale] = useState(zh_CN);\\n const [localeCode, setLocaleCode] = useState('zh_CN');\\n\\n const language = useMemo(() => ({\\n 'zh_CN': zh_CN,\\n 'en_GB': en_GB,\\n 'en_US': en_US,\\n 'ko_KR': ko_KR,\\n 'ja_JP': ja_JP,\\n 'ar': ar,\\n 'vi_VN': vi_VN,\\n 'ru_RU': ru_RU,\\n 'id_ID': id_ID,\\n 'ms_MY': ms_MY,\\n 'th_TH': th_TH,\\n 'tr_TR': tr_TR,\\n 'pt_BR': pt_BR,\\n 'zh_TW': zh_TW,\\n 'es': es,\\n 'sv_SE': sv_SE,\\n 'pl_PL': pl_PL,\\n 'nl_NL': nl_NL,\\n de,\\n it,\\n fr,\\n ro,\\n 'bn_IN': bn_IN,\\n az,\\n bg,\\n ca,\\n 'cs_CZ': cs_CZ,\\n 'ceb_PH': ceb_PH,\\n da,\\n 'el_GR': el_GR,\\n 'es_419': es_419,\\n et,\\n 'fa_IR': fa_IR,\\n 'fil_PH': fil_PH,\\n 'fi_FI': fi_FI,\\n 'fr_CA': fr_CA,\\n ga,\\n 'he_IL': he_IL,\\n 'hi_IN': hi_IN,\\n hr,\\n 'hu_HU': hu_HU,\\n is,\\n 'jv_ID': jv_ID,\\n kk,\\n 'km_KH': km_KH,\\n lt,\\n lv,\\n 'my_MM': my_MM,\\n nb,\\n pt,\\n sk,\\n sl,\\n sq,\\n sw,\\n 'uk_UA': uk_UA,\\n ur,\\n uz,\\n }), []);\\n\\n const onLanguageChange = useCallback((code) => {\\n setLocale(language[code]);\\n setLocaleCode(code);\\n }, [language]);\\n\\n const treeData = [\\n {\\n label: 'Asia',\\n value: 'asia',\\n key: '1',\\n children: [\\n {\\n label: 'China',\\n value: 'china',\\n key: '1-0',\\n children: [\\n { label: 'Beijing', value: 'beijing', key: '1-0-0' },\\n { label: 'Shanghai', value: 'shanghai', key: '1-0-1' },\\n ],\\n },\\n {\\n label: 'Japan',\\n value: 'japan',\\n key: '1-1',\\n children: [ { label: 'Osaka', value: 'osaka', key: '1-1-0' } ]\\n },\\n ]\\n }\\n ];\\n const I18nComponent = () => {\\n const [modalVisible, setModalVisible] = useState(false);\\n const columns = useMemo(() => [\\n {\\n title: 'Name',\\n width: 250,\\n dataIndex: 'name',\\n },\\n {\\n title: 'Age',\\n width: 150,\\n dataIndex: 'age',\\n },\\n {\\n title: 'Address',\\n dataIndex: 'address',\\n },\\n ]);\\n const dataSource = useMemo(() => {\\n const data = [];\\n for (let i = 0; i < 46; i++) {\\n data.push({\\n key: '' + i,\\n name: `Bytedance ${i}`,\\n age: 32,\\n address: `Beijing, Haidian. Zhichun Road ${i}`,\\n });\\n }\\n return data;\\n });\\n const transferData = useMemo(() => {\\n return Array.from({ length: 100 }, (v, i) => {\\n return {\\n label: `\\u9009\\u9879\\u540D\\u79F0 ${i}`,\\n value: i,\\n disabled: false,\\n key: i,\\n };\\n });\\n });\\n const srcList = useMemo(() => ([\\n \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg\\\",\\n ]), []);\\n const style = { margin: 10 };\\n return (\\n <>\\n
Pagination
\\n \\n
Modal
\\n\\n
\\n \\n setModalVisible(false)}\\n onCancel={() => setModalVisible(false)}\\n >\\n

This is the content of a basic modal.

\\n

More content...

\\n \\n
\\n
Select & Cascader
\\n
\\n \\n \\n
\\n
DatePicker
\\n \\n \\n \\n \\n
TimePicker
\\n \\n

\\n
TreeSelect
\\n \\n
Table
\\n \\n
Table - Empty
\\n
\\n
List - Empty
\\n List} dataSource={[]}/>\\n
Calendar
\\n \\n
Typography - Copyable
\\n Click to copy text.\\n
Typography - Collapsible
\\n \\n \\u652F\\u6301\\u5C55\\u5F00\\u548C\\u6298\\u53E0\\uFF1ASemi Design \\u662F\\u7531\\u6296\\u97F3\\u524D\\u7AEF\\u56E2\\u961F\\u4E0E UED \\u56E2\\u961F\\u5171\\u540C\\u8BBE\\u8BA1\\u5F00\\u53D1\\u5E76\\u7EF4\\u62A4\\u7684\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u3002\\u8BBE\\u8BA1\\u7CFB\\u7EDF\\u5305\\u542B\\u8BBE\\u8BA1\\u8BED\\u8A00\\u4EE5\\u53CA\\u4E00\\u6574\\u5957\\u53EF\\u590D\\u7528\\u7684\\u524D\\u7AEF\\u7EC4\\u4EF6\\uFF0C\\u5E2E\\u52A9\\u8BBE\\u8BA1\\u5E08\\u4E0E\\u5F00\\u53D1\\u8005\\u66F4\\u5BB9\\u6613\\u5730\\u6253\\u9020\\u9AD8\\u8D28\\u91CF\\u7684\\u3001\\u7528\\u6237\\u4F53\\u9A8C\\u4E00\\u81F4\\u7684\\u3001\\u7B26\\u5408\\u8BBE\\u8BA1\\u89C4\\u8303\\u7684 Web \\u5E94\\u7528\\u3002\\n \\n
Transfer
\\n \\n
Image
\\n \\n {srcList.map((src, index) => {\\n return (\\n \\n );\\n })}\\n \\n
Form
\\n
console.log(values)}>\\n \\n \\n
Navigation
\\n },\\n { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: },\\n ]}\\n header={{\\n logo: ,\\n text: 'Semi \\u6570\\u636E\\u540E\\u53F0'\\n }}\\n footer={{\\n collapseButton: true,\\n }}\\n />\\n \\n );\\n };\\n return (\\n <>\\n
\\n \\n
\\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/other/locale","next":{"fields":{"slug":"en-US/plus/audioPlayer"},"id":"fbea2623-253c-53dd-abda-de5dcf959912","frontmatter":{"title":"AudioPlayer","localeCode":"en-US","icon":"doc-audioplayer","showNew":null}},"previous":{"fields":{"slug":"en-US/other/locale"},"id":"1b8c75fa-e437-5626-9aa9-16dab28b6bff","frontmatter":{"title":"LocaleProvider","localeCode":"en-US","icon":"doc-i18n","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}