卡片式介面

Google Workspace 外掛程式是以資訊卡為基礎，編輯器外掛程式是以 HTML 為基礎。

Google Workspace 外掛程式資訊卡介面範例。

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

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

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

以 Google Apps Script 建構的 Google Workspace 外掛程式會使用資訊卡服務，從資訊卡建立使用者介面。以其他語言建構的外掛程式必須傳回格式正確的 JSON，介面才能以資訊卡形式顯示。

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

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

  • 建立以資訊卡為基礎的介面時，不需要具備 HTML 或 CSS 知識。
  • 系統會自動為資訊卡和 Widget 設定樣式，確保這些項目能與擴充的 Google Workspace 應用程式搭配使用。
  • 以資訊卡為基礎的介面適用於電腦和行動裝置，但您只需要定義一次介面。

在行動裝置上，只有 Gmail 可透過 Google Workspace 外掛程式擴充功能。

建立卡片式介面

建構以資訊卡為基礎的外掛程式時，請務必瞭解特定概念和設計模式。下列指南提供您建立有效資訊卡式外掛程式所需的資訊：

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