Red Hat Summit 红帽全球峰会支持控制台（Console）开发人员开始试用联系人

7.3. 在 RHDH 中启用浮动操作按钮

您可以为浮动操作按钮启用翻译键支持，以便用户可以使用首选语言载入它。在 Developer Hub 中，所有现有和新创建的浮动操作按钮都支持使用专用转换密钥进行本地化。

Global Floating Action Button 插件通过转换键支持国际化(i18n)。您可以使用 labelKey 和 toolTipKey 属性来提供翻译密钥而不是静态文本。

该插件提供以下在 fab 命名空间下组织的内置翻译键：

  • fab.create.label - "Create"
  • fab.create.tooltip - "Create entity"
  • fab.docs.label - "Docs"
  • fab.docs.tooltip - "Documentation"
  • fab.apis.label - "API"
  • fab.apis.tooltip - "API 文档"
  • fab.github.label - "GitHub"
  • fab.github.tooltip - "GitHub Repository"
  • fab.bulkImport.label - "Bulk Import"
  • fab.bulkImport.tooltip - "Register multiple repositories in bulk"
  • fab.quay.label - "Quay"
  • fab.quay.tooltip - "Quay Container Registry"

该插件包括以下支持的语言的翻译：

  • 英语（默认）
  • 法语(fr)

要在提供翻译支持时确保向后兼容性，可以使用以下顺序来解决字符串转换：

  1. 如果提供了 labelKey，插件将尝试解析翻译键
  2. 如果找到了翻译键，它将用作标签
  3. 如果没有找到 translation 键，插件将回退到 label 属性
注意

相同的逻辑适用于 toolTipKey 和 toolTip。

7.3.1. 内部转换实现
复制链接

该插件使用集中式转换系统，其中：

  • 在组件中调用 useTranslation （） hook，它呈现浮动操作按钮以确保正确转换上下文初始化
  • 翻译功能(t)传递到需要解析翻译密钥的子组件
  • 这种内部架构可防止无限再渲染循环并确保稳定的组件渲染
  • 所有使用 CustomFab 的组件都必须作为 prop 提供翻译功能
注意

在扩展或修改插件组件时，请确保在父组件中调用 useTranslation （） hook，并将 t prop 传递给 CustomFab 实例，以保持正确的翻译功能并防止呈现问题。

Red Hat logoGithubredditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务，以及可以信赖的内容，帮助红帽用户创新并实现他们的目标。 了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情，请参阅红帽博客.

關於紅帽

我们提供强化的解决方案，使企业能够更轻松地跨平台和环境（从核心数据中心到网络边缘）工作。

Theme

© 2026 Red Hat返回顶部