基于卡片的接口
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
编辑器插件基于 HTML。

Google Workspace 加载项会在宿主应用的界面侧边栏中显示信息和用户控件。插件由一个主要识别工具栏以及一个或多个卡片组成。
每张卡片都代表插件界面的特定“页面”,而导航到新卡片通常只需创建该卡片并将其推送到内部卡片堆栈即可。您可以定义卡片之间的导航流程,以实现丰富的互动体验。
卡片可以是非情境化的,也可以是情境化的。当宿主应用处于特定情境时,系统会向用户显示情境卡片。例如,打开 Gmail 邮件或日历活动时。非情境化卡片(例如首页)会在宿主应用的特定情境之外呈现给用户。例如,当用户查看其 Gmail 收件箱、云端硬盘主文件夹或日历时。
使用 Apps 脚本构建的 Google Workspace 插件使用卡片服务通过卡片创建用户界面。以其他语言构建的插件必须返回格式正确的 JSON,才能使界面呈现为卡片。
每张卡片都包含一个标题和一个或多个卡片部分。每个部分都由一组微件组成。微件可向用户显示信息或提供按钮等互动控件。
基于卡片的界面具有以下优势:
创建卡片式界面
在构建基于卡片的插件时,请务必了解某些概念和设计模式。以下指南提供了构建有效的卡片式插件所需的信息:
在创建卡片和实现界面行为时,请参考这些页面。您可能还会发现以下其他示例有助于您在实现插件时进行参考:
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-04。
[null,null,["最后更新时间 (UTC):2025-08-04。"],[[["\u003cp\u003eGoogle Workspace add-ons use cards to build user interfaces within the host application's sidebar, offering navigation and interactive elements.\u003c/p\u003e\n"],["\u003cp\u003eCards can be contextual, appearing in specific situations like opening an email, or non-contextual, like when viewing your inbox.\u003c/p\u003e\n"],["\u003cp\u003eCard-based interfaces are built using cards, widgets, and actions, offering a structured way to present information and controls.\u003c/p\u003e\n"],["\u003cp\u003eAdd-ons built with Apps Script utilize the Card service, while other languages require formatted JSON for card rendering.\u003c/p\u003e\n"],["\u003cp\u003eThese interfaces are automatically styled, responsive across devices, and require no HTML/CSS knowledge for basic creation.\u003c/p\u003e\n"]]],["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"],null,["# Card-based interfaces\n\n| **Note:** Google Workspace add-ons are card-based. Editor add-ons are [HTML-based](/workspace/add-ons/concepts/html-interfaces).\n\nGoogle Workspace add-ons present information and user\ncontrols in the sidebar of the\n[host application](/workspace/add-ons/guides/glossary#host_or_host_application)\nUI. An add-on consists of a main identifying toolbar along with one or more\n[cards](/workspace/add-ons/concepts/cards).\n\nEach card represents a particular 'page' of your add-on's UI, and\n[navigating to a new card](/workspace/gmail/add-ons/how-tos/navigation) is\nusually just a matter of creating that card and\n[pushing it onto an internal card stack](/workspace/gmail/add-ons/how-tos/navigation#navigation_methods).\nYou can define navigation flows between cards for a rich interaction experience.\n\nCards can be *non-contextual* or *contextual* . Contextual cards are presented\nto the user when the host application is in a specific context. For example,\nwhen opening a Gmail message or Calendar event. Non-contextual cards (such as\n[homepages](/workspace/add-ons/concepts/homepages)) are presented to the user\noutside of a specific context of the host. For example, when the user is\nviewing their Gmail inbox, main Drive folder, or Calendar.\n\nGoogle Workspace add-ons built in Apps Script use the\n[Card service](/apps-script/reference/card-service/card-service) to create user interfaces out of\n[cards](/workspace/add-ons/concepts/cards). Add-ons built in other languages\nmust return properly formatted JSON for the interface to render as cards.\n\nEach card consists of a header and one or more card sections. Each section is\ncomposed of a set of [widgets](/workspace/add-ons/concepts/widgets). Widgets\ndisplay information to the user or provide interaction controls like buttons.\n\nCard-based interfaces have the following benefits:\n\n- No knowledge of HTML or CSS is needed to create card-based interfaces.\n- Cards and widgets are automatically styled to work well with the Google Workspace applications they extend.\n- Card-based interfaces work on both desktop and mobile devices, but you only\n need to define the interface once.\n\n | **Note:** Gmail is currently the only host application that can be extended by Google Workspace add-ons on mobile.\n\nCreating card-based interfaces\n------------------------------\n\nWhen building card-based add-ons, it's important to understand certain\nconcepts and design patterns. The following guides provide the information\nyou need to build effective card-based add-ons:\n\n- [Cards](/workspace/add-ons/concepts/cards)\n- [Homepages](/workspace/add-ons/concepts/homepages)\n- [Widgets](/workspace/add-ons/concepts/widgets)\n- [Actions](/workspace/add-ons/concepts/actions)\n- [Event objects](/workspace/add-ons/concepts/event-objects)\n- [Constructing cards](/workspace/add-ons/how-tos/building-workspace-addons#constructing_cards)\n- [Building interactive cards](/workspace/add-ons/how-tos/interactions)\n- [Navigating between cards](/workspace/add-ons/how-tos/navigation)\n- [Using universal actions](/workspace/add-ons/how-tos/universal-actions)\n- [Adding autocomplete to text inputs](/workspace/add-ons/how-tos/suggestions)\n- [Accessing user locales and timezones](/workspace/add-ons/how-tos/access-user-locale)\n- [Connecting to non-Google services](/workspace/add-ons/how-tos/non-google-services)\n- [Style guide](/workspace/add-ons/guides/workspace-style)\n- [Best Practices](/workspace/add-ons/guides/workspace-best-practices)\n\nReference these pages when creating cards and implementing\nUI behavior. You may also find the following additional samples useful to\nreference when implementing your add-on:\n\n- [Google Workspace add-on \"Cats\" quickstart](/workspace/add-ons/cats-quickstart)\n\n This add-on sample shows a simple Google Workspace add-on UI with multiple pages and\n homepages.\n- [Google Workspace add-on: \"Translate\"](/workspace/add-ons/translate-addon-sample)\n\n This add-on sample shows a Google Workspace add-on that lets users translate text from\n within Docs, Sheets, and Slides.\n- [Google Workspace add-on: \"Teams List\"](/workspace/add-ons/teams-addon-sample)\n\n This add-on sample shows a more complex\n Google Workspace add-on sample, that shows\n user information about Gmail message recipients, Drive file editors, or\n Calendar event attendees. You can only use this add-on inside a domain, since\n it uses the [Directory API](/workspace/admin/directory) to retrieve\n user information."]]