logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.26.0
  • Ant Design of React
  • 更新日志
    v5.26.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ
ConfigProvider
增加语言包
i18n 项目示例

国际化

文档贡献者
  • 使用自定义日期库通用属性

    相关资源

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Ant Design
    Medium
    Twitter
    yuque logoAnt Design 语雀专栏
    Ant Design 知乎专栏
    体验科技专栏
    seeconf logoSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech logo更多产品

    yuque logo语雀-构建你的数字花园
    AntV logoAntV-数据可视化解决方案
    Egg logoEgg-企业级 Node.js 框架
    Kitchen logoKitchen-Sketch 工具集
    Galacean logoGalacean-互动图形解决方案
    xtech logo蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Ant Design 开源社区

    antd 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。

    ConfigProvider

    antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。

    jsx
    import zhCN from 'antd/locale/zh_CN';
    // for date-picker i18n
    import 'dayjs/locale/zh-cn';
    return (
    <ConfigProvider locale={zhCN}>
    <App />
    </ConfigProvider>
    );

    详细配置见:ConfigProvider。

    注意:zh_CN 是文件名,以下表格也遵循同样的规则。

    目前支持以下语言:

    语言文件名
    阿拉伯语ar_EG
    阿塞拜疆语az_AZ
    保加利亚语bg_BG
    孟加拉语(孟加拉国)bn_BD
    白俄罗斯语by_BY
    加泰罗尼亚语ca_ES
    捷克语cs_CZ
    丹麦语da_DK
    德语de_DE
    希腊语el_GR
    英语en_GB
    英语(美式)en_US
    西班牙语es_ES
    巴斯克语eu_ES
    爱沙尼亚语et_EE
    波斯语fa_IR
    芬兰语fi_FI
    法语(比利时)fr_BE
    法语(加拿大)fr_CA
    法语(法国)fr_FR
    爱尔兰语ga_IE
    加利西亚语(西班牙)gl_ES
    希伯来语he_IL
    印地语hi_IN
    克罗地亚语hr_HR
    匈牙利语hu_HU
    亚美尼亚hy_AM
    印度尼西亚语id_ID
    意大利语it_IT
    冰岛语is_IS
    日语ja_JP
    格鲁吉亚语ka_GE
    高棉语km_KH
    北库尔德语kmr_IQ
    卡纳达语kn_IN
    哈萨克语kk_KZ
    韩语/朝鲜语ko_KR
    立陶宛语lt_LT
    拉脱维亚语lv_LV
    马其顿语mk_MK
    马拉雅拉姆语ml_IN
    蒙古语mn_MN
    马来语 (马来西亚)ms_MY
    缅甸语my_MM
    挪威语nb_NO
    尼泊尔语ne_NP
    荷兰语(比利时)nl_BE
    荷兰语nl_NL
    波兰语pl_PL
    葡萄牙语(巴西)pt_BR
    葡萄牙语pt_PT
    罗马尼亚语ro_RO
    俄罗斯语ru_RU
    僧伽罗语si_LK
    斯洛伐克语sk_SK
    塞尔维亚语sr_RS
    斯洛文尼亚语sl_SI
    瑞典语sv_SE
    泰米尔语ta_IN
    泰语th_TH
    土耳其语tr_TR
    土库曼tk_TK
    乌尔都语 (巴基斯坦)ur_PK
    乌克兰语uk_UA
    乌兹别克语(拉丁字母)uz_UZ
    越南语vi_VN
    简体中文zh_CN
    繁体中文(中国香港)zh_HK
    繁体中文(中国台湾)zh_TW

    具体的使用方法请参考 ConfigProvider 文档。

    增加语言包

    如果你找不到你需要的语言包,欢迎你在 英文语言包 的基础上创建一个新的语言包,并给我们发一个 Pull Request,可以参考 阿塞拜疆语的 PR。

    基本步骤如下:

    1. Fork antd 并 git clone 到本地,切换到 feature 分支,执行一次拉取确保最新,基于 feature 分支切换一个新分支,以下工作将在新分支完成。

      bash
      git clone git@github.com:<your organization>/ant-design.git
      cd ant-design/
      git remote add upstream git@github.com:ant-design/ant-design.git
      git checkout -b <your new branch name> upstream/feature
    2. 为 rc-picker 添加对应语言,参考 这个。

    3. 为 rc-pagination 添加对应语言,参考 这个。

    4. 等待 rc-picker 和 rc-pagination 发布含上述内容的最低版本。

    5. 参考 阿塞拜疆语的 PR 向 antd 发起 PR,完善对应语言的其他内容和更新 rc-picker 和 rc-pagination 版本。

    6. 在 index.test.tsx 添加该语言的测试用例。

    7. 更新 snapshot,在这之前或许你还需要先删除 node_modules 和 lock 文件 (yarn.lock or package-lock.json) 并全新安装。

      bash
      npm run test -- components/locale -u
    8. 更新 docs/react/i18n.zh-CN.md 和 docs/react/i18n.zh-CN.md,将对应语言添加到文档列表。

    9. 观察 CI 是否通过,若未通过,根据日志进行修改直至通过。

    10. 万事俱备等待 review 。

    i18n 项目示例

    你可以参考 Ant Design Pro 国际化文档 查看完整的国际化项目示例。