基于卡片的接口

Google Workspace 插件基于卡片。编辑器插件基于 HTML。

Google Workspace 插件卡片界面示例。

插件会在宿主应用的界面侧边栏中显示信息和用户控件。Google Workspace 插件由一个主要标识工具栏以及一个或多个卡片组成。

每张卡片都代表插件界面的特定“页面”。 导航到新卡片通常只需创建该卡片并将其推送到内部卡片堆栈即可。 您可以定义卡片之间的导航流程，以实现丰富的互动体验。

卡片可以是非情境化的，也可以是情境化的。当宿主应用处于特定情境中时（例如打开 Gmail 邮件或 Google 日历活动时），系统会向用户显示情境卡片。 非情境化卡片（例如首页）会在用户处于宿主应用的特定情境之外时显示给用户，例如当用户查看其 Gmail 收件箱、Google 云端硬盘文件夹或日历时。

使用 Google Apps 脚本构建的 Google Workspace 插件使用卡片服务通过卡片创建用户界面。以其他语言构建的插件必须返回格式正确的 JSON，以便界面以卡片形式呈现。

每张卡片都包含一个标题和一个或多个卡片部分。每个部分都由一组微件组成。微件可向用户显示信息或提供按钮等互动控件。

基于卡片的界面具有以下优势：

  • 无需具备 HTML 或 CSS 方面的知识即可创建基于卡片的界面。
  • 卡片和 widget 会自动设置样式，以便与它们扩展的 Google Workspace 应用搭配使用。
  • 基于卡片的界面可在桌面设备和移动设备上运行，但您只需定义一次界面。

Gmail 是唯一可以在移动设备上通过 Google Workspace 插件进行扩展的宿主应用。

创建卡片式界面

在构建基于卡片的插件时，请务必了解某些概念和设计模式。以下指南提供了构建有效的基于卡片的插件所需的信息：

在创建卡片和实现界面行为时，请参考这些页面。在实现插件时，您可能还会发现以下其他示例很有用：