第 7 章 动态插件


7.1. 动态插件概述

7.1.1. 关于动态插件

动态插件允许您在运行时为接口添加自定义页面和其他扩展。ConsolePlugin 自定义资源使用控制台注册插件,集群管理员在 console-operator 配置中启用了插件。

7.1.2. 主要特性

通过动态插件,您可以对 OpenShift Container Platform 体验进行以下自定义:

  • 添加自定义页面。
  • 增加了除管理员和开发人员之外的其他视角。
  • 添加导航项。
  • 在资源页面中添加制表符和操作。

7.1.3. 常规指南

在创建插件时,请遵循以下常规准则:

  • 构建和运行插件需要 Node.jsyarn
  • 为您的 CSS 类名称加上插件名称前缀,以避免冲突。例如,my-plugin__headingmy-plugin_\_icon
  • 与其他控制台页面保持一致的外观、感觉和行为。
  • 在创建插件时遵循 react-i18next 指南。您可以使用类似以下示例中的 useTranslation hook:

    conster Header: React.FC = () => {
      const { t } = useTranslation('plugin__console-demo-plugin');
      return <h1>{t('Hello, World!')}</h1>;
    };
  • 避免可能影响插件组件之外的标记的选择器,如元素选择器。这些不是 API,可能随时更改。使用它们可能会破坏插件。避免选择器,如元素选择器,它们可能会影响插件组件之外的标记。

PatternFly 指南

在创建插件时,请按照以下使用 PatternFly 的准则进行以下操作:

  • 使用 PatternFly 组件和 PatternFly CSS 变量。SDK 提供了核心 PatternFly 组件。使用 PatternFly 组件和变量可帮助您的插件在将来的控制台版本中保持一致。
  • 您可以按照 PatternFly 的可访问性基础,使您的插件能被访问。
  • 避免使用其他 CSS 库,如 Bootstrap 或 Tailwind。它们可能会与 PatternFly 冲突,不会与控制台的外观和感觉相匹配。
Red Hat logoGithubRedditYoutubeTwitter

学习

尝试、购买和销售

社区

关于红帽文档

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

让开源更具包容性

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

關於紅帽

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

© 2024 Red Hat, Inc.