Docker extensions 的 UI 样式概述
目录
我们的设计系统是一套不断发展的规范,旨在确保 Docker 产品之间的视觉一致性,并达到 AA 级可访问性标准。我们已向扩展作者开放部分内容,记录了基本样式(颜色、排版)和组件。请参阅:Docker Extensions 样式指南。
我们要求扩展在一定程度上与 Docker Desktop 更广泛的 UI 保持一致,并保留将来对此进行更严格要求的权利。
要开始构建 UI,请按照以下步骤操作。
第一步:选择框架
推荐:使用我们的主题,选择 React+MUI
Docker Desktop 的 UI 是使用 React 和 MUI (具体来说是使用 Material UI)。这是唯一官方支持的用于构建扩展的框架,也是我们的 init
命令会自动为您配置的框架。使用它会给作者带来显著优势
- 您可以使用我们的 Material UI 主题 自动复制 Docker Desktop 的外观和风格。
- 将来,我们将发布专门针对这种组合的实用程序和组件(例如,自定义 MUI 组件或用于与 Docker 交互的 React 钩子)。
阅读我们的 MUI 最佳实践指南,了解如何在 Docker Desktop 中使用 MUI 的未来友好方式。
不推荐:其他框架
您可能更喜欢使用其他框架,也许是因为您或您的团队更熟悉它,或者因为您有想要重用的现有资产。这是可能的,但非常不推荐。这意味着
- 您需要手动复制 Docker Desktop 的外观和风格。这需要大量精力,如果您与我们的主题匹配度不够高,用户会觉得您的扩展不协调,我们可能会在审核过程中要求您进行更改。
- 您的维护负担会更高。无论何时 Docker Desktop 的主题发生变化(这可能发生在任何发布版本中),您都需要手动更改您的扩展以匹配它。
- 如果您的扩展是开源的,故意避免通用约定会使社区更难为其贡献力量。
第二步:遵循以下建议
遵循我们的 MUI 最佳实践(如适用)
请参阅我们的 MUI 最佳实践文章。
仅使用我们调色板中的颜色
除少量例外(例如显示您的徽标)外,您应仅使用我们调色板中的颜色。这些颜色可在我们的 样式指南文档 中找到,并且很快将在我们的 MUI 主题和通过 CSS 变量提供。
在亮/暗模式下使用对应颜色
我们的颜色经过选择,以便调色板中每种变体的对应颜色应具有相同的基本特征。无论您在亮模式下使用 red-300
,在暗模式下也应使用 red-300
。