基于卡片的接口

Google Workspace 插件会在托管应用界面的边栏中显示信息和用户控件。插件由一个主要标识工具栏和一张或多张卡片组成。
每张卡片都代表该插件界面的特定“页面”,导航到新卡片通常只需创建该卡片并将其推送到内部卡片堆栈即可。您可以定义卡片之间的导航流程,以获得丰富的互动体验。
卡片可以是非情境卡片,也可以是情境卡片。当托管应用处于特定情境时,系统会向用户显示情境卡片。例如,在打开 Gmail 邮件或 Google 日历活动时。非情境卡片(例如首页)会在主机的特定情境之外向用户显示。例如,当用户查看 Gmail 收件箱、云端硬盘主文件夹或日历时。
使用 Apps 脚本构建的 Google Workspace 插件使用卡片服务通过卡片创建界面。使用其他语言构建的插件必须返回格式正确的 JSON,以便界面以卡片的形式呈现。
每张卡片都由标题和一个或多个卡片部分组成。每个版块由一组微件组成。微件可向用户显示信息或提供按钮等互动控件。
基于卡片的界面具有以下优势:
创建卡片式界面
在构建基于卡片的插件时,请务必了解某些概念和设计模式。以下指南提供了构建有效的基于卡片的插件所需的信息:
在创建卡片和实现界面行为时,请参考这些页面。在实现您的插件时,您可能还会发现以下其他示例很有参考价值:
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-02-16。
[null,null,["最后更新时间 (UTC):2025-02-16。"],[[["Google Workspace add-ons use cards to build user interfaces within the host application's sidebar, offering navigation and interactive elements."],["Cards can be contextual, appearing in specific situations like opening an email, or non-contextual, like when viewing your inbox."],["Card-based interfaces are built using cards, widgets, and actions, offering a structured way to present information and controls."],["Add-ons built with Apps Script utilize the Card service, while other languages require formatted JSON for card rendering."],["These interfaces are automatically styled, responsive across devices, and require no HTML/CSS knowledge for basic creation."]]],["Google Workspace add-ons utilize card-based UIs within host applications, comprising a toolbar and multiple cards. These cards, representing UI pages, are built using the Card service or JSON. Navigation involves pushing new cards onto a stack. Cards can be contextual, appearing in specific host application states, or non-contextual, like homepages, visible in general views. Each card contains sections composed of widgets, offering information or interaction controls. Key actions include defining card navigation, constructing cards with sections and widgets, and implementing actions.\n"]]