Docker 擴充套件的 UI 樣式概述

目錄

我們的設計系統是一套不斷演進的規範，旨在確保 Docker 產品之間的視覺一致性，並滿足 AA 級輔助功能標準。我們已向擴充套件作者開放了部分內容，記錄了基本樣式（顏色、排版）和元件。請參閱：Docker 擴充套件樣式指南。

我們要求擴充套件在一定程度上與更廣泛的 Docker Desktop UI 保持一致，並保留將來使其更嚴格的權利。

要開始構建 UI，請按照以下步驟操作。

第一步：選擇您的框架

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。

下一步是什麼？