卡片式介面

外掛程式卡片範例

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

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

資訊卡可以是非脈絡式或脈絡式。當主機應用程式處於特定情境時，系統會向使用者顯示情境資訊卡。舉例來說，開啟 Gmail 郵件或日曆活動時，系統會向使用者顯示非情境式資訊卡 (例如首頁)，但這些資訊卡與主機的特定情境無關。舉例來說，當使用者查看 Gmail 收件匣、主要雲端硬碟資料夾或日曆時。

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

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

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

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

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

建立卡片式介面

建構以資訊卡為基礎的外掛程式時，請務必瞭解特定概念和設計模式。如要建構有效的資訊卡式外掛程式，請參閱下列指南：

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