Class Columns
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.
Cột
Tiện ích Columns hiển thị tối đa 2 cột trong một thẻ hoặc hộp thoại. Bạn có thể thêm tiện ích vào
mỗi Column; các tiện ích sẽ xuất hiện theo thứ tự được chỉ định. Để biết ví dụ về ứng dụng Google Chat, hãy xem phần Cột.
Chiều cao của mỗi cột được xác định bởi cột cao hơn. Ví dụ: nếu cột đầu tiên cao hơn cột thứ hai, thì cả hai cột đều có chiều cao bằng cột đầu tiên. Vì mỗi cột có thể chứa số lượng tiện ích khác nhau, nên bạn không thể xác định hàng hoặc căn chỉnh các tiện ích giữa các cột.
Các cột hiển thị cạnh nhau. Bạn có thể tuỳ chỉnh chiều rộng của từng cột bằng cách sử dụng trường HorizontalSizeStyle. Nếu chiều rộng màn hình của người dùng quá hẹp, cột thứ hai sẽ cuộn xuống bên dưới cột đầu tiên:
- Trên web, cột thứ hai sẽ tự ngắt dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 480 pixel.
- Trên các thiết bị iOS, cột thứ hai sẽ tự động xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 300 pt.
- Trên thiết bị Android, cột thứ hai sẽ cuộn nếu chiều rộng màn hình nhỏ hơn hoặc bằng 320 dp.
Có sẵn cho các ứng dụng Google Chat và tiện ích bổ sung của Google Workspace. Các giao diện người dùng bổ sung hỗ trợ cột bao gồm:
- Hộp thoại hiển thị khi người dùng mở tiện ích bổ sung từ một email nháp.
- Hộp thoại hiển thị khi người dùng mở tiện ích bổ sung từ trình đơn Thêm tệp đính kèm trong một sự kiện trên Lịch Google.
// Build a column that is aligned in the center and fills the space:
const column =
CardService.newColumn()
.setHorizontalSizeStyle(
CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
.setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
.setVerticalAlignment(CardService.VerticalAlignment.CENTER);
const columns = CardService.newColumns().addColumn(column).setWrapStyle(
CardService.WrapStyle.WRAP);
Tài liệu chi tiết
addColumn(column)
Thêm Column vào tiện ích Cột. Các cột sẽ hiển thị theo thứ tự được thêm. Bạn có thể thêm tối đa 2 cột.
const columns = CardService.newColumns().addColumn(CardService.newColumn());
Thông số
| Tên | Loại | Mô tả |
column | Column | Một cột con để thêm vào tiện ích Cột. |
Cầu thủ trả bóng
Columns – Đối tượng này, để tạo chuỗi.
setWrapStyle(wrapStyle)
Đặt kiểu gói của các cột, kiểm soát cách cột đổi kích thước dựa trên chiều rộng màn hình.
const columns = CardService.newColumns()
.addColumn(CardService.newColumn())
.setWrapStyle(CardService.WrapStyle.WRAP);
Thông số
| Tên | Loại | Mô tả |
wrapStyle | WrapStyle | Kiểu gói để đặt cho các cột. |
Cầu thủ trả bóng
Columns – Đối tượng này, để tạo chuỗi.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-26 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-26 UTC."],[[["\u003cp\u003eThe Columns widget allows displaying up to two columns within cards or dialogs, with widgets arranged vertically within each column.\u003c/p\u003e\n"],["\u003cp\u003eColumn height is determined by the taller column, and widgets cannot be aligned across columns or organized into rows.\u003c/p\u003e\n"],["\u003cp\u003eColumns are displayed side-by-side and wrap to a vertical layout on smaller screens based on specified screen width thresholds.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options include adjusting column width and controlling wrapping behavior with \u003ccode\u003eHorizontalSizeStyle\u003c/code\u003e and \u003ccode\u003eWrapStyle\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThis widget is available for Google Chat apps and specific Google Workspace Add-ons, like dialogs in email drafts or Calendar event attachments.\u003c/p\u003e\n"]]],["The Columns widget displays up to two columns in a card or dialog, with widgets added to each column in a specified order. Column height is determined by the taller column, and widths can be customized. If the screen is too narrow, the second column wraps below the first, with specific pixel/point/dp thresholds for web, iOS, and Android devices. Key actions include adding columns using `addColumn()` and controlling resizing with `setWrapStyle()`. These features are available for Google Chat and Workspace add-ons.\n"],null,["# Class Columns\n\nColumns\n\nThe [Columns](#) widget displays up to 2 columns in a card or dialog. You can add widgets to\neach [Column](/apps-script/reference/card-service/column); the widgets appear in the order that they are specified. For an example in\nGoogle Chat apps, see [Columns](https://developers.google.com/workspace/chat/format-structure-card-dialog#display_cards_and_dialogs_in_columns).\n\nThe height of each column is determined by the taller column. For example, if the first column\nis taller than the second column, both columns have the height of the first column. Because each\ncolumn can contain a different number of widgets, you can't define rows or align widgets between\nthe columns.\n\nColumns are displayed side-by-side. You can customize the width of each column using the\n[HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) field. If the user's screen width is too narrow, the second column\nwraps below the first:\n\n- On web, the second column wraps if the screen width is less than or equal to 480 pixels.\n- On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.\n- On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.\n\nAvailable for Google Chat apps and Google Workspace add-ons. The add-on UIs that support\ncolumns include:\n\n- The dialog displayed when users open the add-on from an email draft.\n- The dialog displayed when users open the add-on from the **Add attachment** menu in a Google Calendar event. \n\n ```javascript\n // Build a column that is aligned in the center and fills the space:\n const column =\n CardService.newColumn()\n .setHorizontalSizeStyle(\n CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)\n .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)\n .setVerticalAlignment(CardService.VerticalAlignment.CENTER);\n const columns = CardService.newColumns().addColumn(column).setWrapStyle(\n CardService.WrapStyle.WRAP);\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------|--------------|--------------------------------------------------------------------------------------------|\n| [addColumn(column)](#addColumn(Column)) | [Columns](#) | Adds a [Column](/apps-script/reference/card-service/column) to the Columns widget. |\n| [setWrapStyle(wrapStyle)](#setWrapStyle(WrapStyle)) | [Columns](#) | Sets the wrap style of the columns, controls how the column resizes based on screen width. |\n\nDetailed documentation\n----------------------\n\n### `add``Column(column)`\n\nAdds a [Column](/apps-script/reference/card-service/column) to the Columns widget. Columns are displayed in the order in which\nthey're added. You can add up to two columns.\n\n```javascript\nconst columns = CardService.newColumns().addColumn(CardService.newColumn());\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|----------|------------------------------------------------------|----------------------------------------------|\n| `column` | [Column](/apps-script/reference/card-service/column) | A child column to add to the Columns widget. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Wrap``Style(wrapStyle)`\n\nSets the wrap style of the columns, controls how the column resizes based on screen width.\n\n```javascript\nconst columns = CardService.newColumns()\n .addColumn(CardService.newColumn())\n .setWrapStyle(CardService.WrapStyle.WRAP);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------|-------------------------------------------------------------|----------------------------------------|\n| `wrap``Style` | [WrapStyle](/apps-script/reference/card-service/wrap-style) | The wrap style to set for the columns. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining."]]
