卡片式介面

外掛程式資訊卡範例

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

每張資訊卡都代表外掛程式 UI 的特定「頁面」，而前往新資訊卡通常只是建立卡片並推送至內部卡片堆疊的一大重點。您可以定義資訊卡之間的導覽流程，藉此提供豐富的互動體驗。

資訊卡可以是非內容比對或內容比對資訊卡。當主機應用程式在特定情境下，使用者就會看到內容相關資訊卡。例如開啟 Gmail 郵件或日曆活動。在主機的特定情境之外，使用者會看到非內容資訊卡 (例如首頁)。例如，使用者正在查看自己的 Gmail 收件匣、主要雲端硬碟資料夾或日曆時。

在 Apps Script 內建的 Google Workspace 外掛程式會使用資訊卡服務，透過資訊卡建立使用者介面。使用其他語言建構的外掛程式必須傳回正確格式的 JSON，介面才能算繪為資訊卡。

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

卡片式介面具有以下優點：

  • 無須瞭解 HTML 或 CSS，即可建立卡片式介面。
  • 資訊卡和小工具會自動設定樣式，可與自己擴充的 Google Workspace 應用程式搭配使用。

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

建立卡片式介面

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

建立資訊卡及實作 UI 行為時，請參考這些網頁。實作外掛程式時，我們也建議您參考下列額外範例：