卡片式介面

外掛程式資訊卡範例

Google Workspace 外掛程式會在主機應用程式 UI 的側欄中顯示資訊和使用者控制項。外掛程式包含主要識別工具列，以及一或多張資訊卡。

每張資訊卡都代表外掛程式的 UI 中的特定「頁面」，而前往新資訊卡通常只需建立該資訊卡，並將其推送至內部資訊卡堆疊即可。您可以定義資訊卡之間的導覽流程，打造豐富的互動體驗。

資訊卡可分為非內容相關或內容相關。主機應用程式處於特定情境時，系統會向使用者顯示情境資訊卡。例如開啟 Gmail 郵件或日曆活動時。非情境資訊卡 (例如首頁) 會在主機的特定情境之外顯示給使用者。例如，當使用者查看 Gmail 收件匣、主要雲端硬碟資料夾或日曆時。

在 Apps Script 中建立的 Google Workspace 外掛程式會使用資訊卡服務，利用資訊卡建立使用者介面。以其他語言建構的擴充功能必須傳回格式正確的 JSON，才能讓介面以卡片呈現。

每張資訊卡都包含標題和一或多個資訊卡部分。每個部分都由一組小工具組成。小工具會向使用者顯示資訊，或提供按鈕等互動控制項。

以卡片為基礎的介面具有下列優點：

  • 您不需要具備 HTML 或 CSS 相關知識，即可建立以資訊卡為基礎的介面。
  • 系統會自動為資訊卡和小工具套用樣式，讓這些元素與所擴充的 Google Workspace 應用程式搭配無誤。

  • 資訊卡介面適用於電腦和行動裝置，但您只需定義一次介面。

建立資訊卡式介面

建構卡片式外掛程式時，請務必瞭解特定概念和設計模式。下列指南提供建構有效資訊卡式外掛程式的必要資訊：

建立資訊卡和實作 UI 行為時，請參考這些頁面。您也可以在導入外掛程式時參考下列其他範例：