Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Tiện ích bổ sung dựa trên thẻ sẽ xuất hiện dưới dạng một ngăn trong thanh bên (hoặc trên thiết bị di động, dưới dạng một cửa sổ hoạt động khác có thể truy cập thông qua trình đơn). Tiện ích bổ sung này có một thanh công cụ trên cùng để xác định tiện ích bổ sung và hiển thị một thẻ – về cơ bản là một "trang" của giao diện người dùng tiện ích bổ sung. Apps Script biểu thị thẻ trong mã dự án bằng các đối tượng Card.
Cấu trúc thẻ
Thẻ là một nhóm các phần tử trên giao diện người dùng mà bạn thiết kế. Thẻ bao gồm các phần sau:
Tiêu đề thẻ. Mã này giúp xác định các thẻ. Thẻ này có văn bản tiêu đề và có thể có phụ đề và biểu tượng (không bắt buộc).
Một hoặc nhiều phần thẻ. Đây là các phân vùng của vùng giao diện người dùng trên thẻ.
Một phần có thể có tiêu đề phần văn bản (không bắt buộc).
Các phần của thẻ được phân tách với nhau bằng một đường kẻ ngang.
Nếu một phần thẻ có kích thước đặc biệt lớn, thì phần đó sẽ tự động hiển thị dưới dạng một phần có thể thu gọn mà người dùng có thể mở rộng hoặc thu gọn khi cần.
Một thẻ có thể có không quá 100 phần thẻ và chỉ nên có một vài phần để đạt được hiệu suất tốt hơn.
Mỗi phần thẻ chứa một hoặc nhiều tiện ích trên giao diện người dùng. Tiện ích cung cấp cho người dùng thông tin hoặc các chế độ kiểm soát tương tác. Thẻ và phần thẻ là các tiện ích cấu trúc, nên bạn không thể thêm các tiện ích đó vào một phần thẻ. Một phần thẻ có thể có không quá 100 tiện ích và phải đơn giản nhất có thể để đạt được hiệu suất tốt nhất.
Bạn nên thiết kế thẻ dựa trên các hoạt động hoặc tập dữ liệu cụ thể của người dùng. Ví dụ: một tiện ích bổ sung của Google Workspace hiển thị dữ liệu lấy từ Google Trang tính có thể có một thẻ riêng cho mỗi trang tính mà tiện ích này lấy dữ liệu.
Nếu tiện ích bổ sung sử dụng chế độ điều hướng cơ bản, thì khi tiện ích bổ sung được mở lần đầu, ứng dụng Google Workspace mà tiện ích bổ sung này mở rộng sẽ tạo một danh sách tiêu đề thẻ và trình bày danh sách đó cho người dùng. Khi bạn nhấp vào tiêu đề thẻ, thẻ đó sẽ mở ra. Mũi tên quay lại cũng được cung cấp để quay lại danh sách tiêu đề thẻ. Bạn không cần lập trình chức năng tiêu đề và mũi tên quay lại – chức năng này sẽ tự động được thực hiện khi bạn xác định các thẻ trong tiện ích bổ sung.
[null,null,["Cập nhật lần gần đây nhất: 2025-08-04 UTC."],[[["\u003cp\u003eGoogle Workspace add-ons utilize cards, essentially UI pages, displayed in a sidebar or activity window, to present information and interactive elements.\u003c/p\u003e\n"],["\u003cp\u003eEach card is structured with a header, sections containing widgets (like buttons or text fields), and is designed around specific user tasks or data sets.\u003c/p\u003e\n"],["\u003cp\u003eAdd-ons often employ multiple cards for navigation; basic navigation provides an automatic card header list and back arrow functionality.\u003c/p\u003e\n"],["\u003cp\u003eFor optimal performance and user experience, it's recommended to keep the number of cards, sections, and widgets to a minimum, prioritizing simplicity in card design.\u003c/p\u003e\n"],["\u003cp\u003eCards have technical limitations, restricting them to a maximum of 100 card sections and 100 widgets per section to maintain performance.\u003c/p\u003e\n"]]],["Add-on cards, displayed in a sidebar or activity window, are UI pages built with `Card` objects. Cards have a header, optional subtitle/icon, and sections. Sections, separated by horizontal rules, contain UI widgets, and large sections collapse. Add-ons use multiple cards for navigation, presented as a list of headers. Basic navigation provides automatic back arrow functionality. Each card section can hold a maximum of 100 widgets, and a card can hold no more than 100 card sections.\n"],null,["# Cards\n\nA card-based add-on appears as a pane in the sidebar (or, on mobile, as another\nactivity window reached through the menu). The add-on has a top toolbar that\nidentifies the add-on and displays a *card* ---essentially a \"page\" of the\nadd-on's UI. Apps Script represents cards in project code using\n[`Card`](/apps-script/reference/card-service/card) objects.\n\nCard anatomy\n------------\n\nA card is a group of UI elements you design. A card consists of the\nfollowing sections:\n\n- **A card header**. This identifies the cards. It has title text, and may optionally have a subtitle and an icon.\n- **One or more card sections** . These are sub-divisions of the card's UI area.\n A section may optionally have a text section header.\n Card sections are separated from each other on the card by a horizontal rule.\n If a card section is particularly large, it is automatically rendered as a\n collapsible section that users can expand or collapse as needed.\n A card can have [no more than 100 card sections](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should have only a few for better performance.\n\n- **Each card section contains one or more UI\n [widgets](/workspace/add-ons/concepts/widgets)** . Widgets provide the user with\n information or interactive controls. Cards and card sections are\n *structural* widgets, so you cannot add those to a card section. A card\n section can have [no more than 100 widgets](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should be as simple as possible for best performance.\n\nYou should design cards around particular user activities or data sets. For\nexample, a Google Workspace add-on that displays data\ntaken from Google Sheets might have a separate card for each sheet it pulls\ndata from.\n\nUsing multiple cards\n--------------------\n\nAdd-ons usually consist of more than one card. You can either configure these\ncards as a simple list for\n[basic navigation with multiple cards](/workspace/add-ons/how-tos/navigation#returning_multiple_cards),\nor configure more complex\n[navigation methods](/workspace/add-ons/how-tos/navigation#navigation_methods)\nto control how the user moves between the cards.\n\nIf the add-on uses basic navigation, when the\nadd-on is first opened the\nGoogle Workspace application it extends constructs a\nlist of the card headers and presents those to the user. Clicking on the card\nheader opens that card. A back arrow is also provided to get back to the card\nheader list. You do not have to code the header and back arrow\nfunctionality---this is done automatically when you define the cards in your\nadd-on.\n\nWhen designing add-ons, it's best to\n[limit the number of cards](/workspace/add-ons/guides/workspace-best-practices#_use_just_a_few_cards)\nyou display at once, since cards must share a limited amount of screen space.\nIt's also best to [avoid unnecessary complexity in cards](/workspace/add-ons/guides/workspace-best-practices#_keep_cards_simple).\n| **Note:** For performance reasons, you can't add more than 100 widgets or 100 card sections to a card."]]
