Class CardHeader
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êu đề thẻ
Tiêu đề của Card.
Có sẵn cho các tiện ích bổ sung của Google Workspace và ứng dụng Google Chat.
const cardHeader = CardService.newCardHeader()
.setTitle('Card header title')
.setSubtitle('Card header subtitle')
.setImageStyle(CardService.ImageStyle.CIRCLE)
.setImageUrl('https://image.png');
Tài liệu chi tiết
setImageAltText(imageAltText)
Đặt văn bản thay thế cho hình ảnh tiêu đề.
Thông số
| Tên | Loại | Mô tả |
imageAltText | String | Văn bản thay thế cho hình ảnh tiêu đề. |
Cầu thủ trả bóng
CardHeader – Đối tượng này, để tạo chuỗi.
setImageStyle(imageStyle)
Đặt chế độ cắt của biểu tượng trong tiêu đề thẻ. Giá trị mặc định là không cắt. Không bắt buộc.
Thông số
| Tên | Loại | Mô tả |
imageStyle | ImageStyle | Chế độ cài đặt kiểu. |
Cầu thủ trả bóng
CardHeader – Đối tượng này, để tạo chuỗi.
setImageUrl(imageUrl)
Đặt hình ảnh để sử dụng trong tiêu đề bằng cách cung cấp URL hoặc chuỗi dữ liệu của hình ảnh đó.
URL được cung cấp có thể là URL có thể truy cập công khai hoặc chuỗi hình ảnh được mã hoá base64.
Để lấy chuỗi hình ảnh được mã hoá, bạn có thể sử dụng mã sau để tạo một chuỗi hình ảnh được mã hoá từ một hình ảnh trong Google Drive, sau đó lưu trữ chuỗi đó để sử dụng sau này với setImageUrl(imageUrl). Phương thức này giúp tiện ích bổ sung của bạn không cần truy cập vào URL hình ảnh có sẵn công khai:
// The following assumes you have the image to use in Google Drive and have its
// ID.
const imageBytes = DriveApp.getFileById('123abc').getBlob().getBytes();
const encodedImageURL =
`data:image/jpeg;base64,${Utilities.base64Encode(imageBytes)}`;
// You can store encodeImageURL and use it as a parameter to
// CardHeader.setImageUrl(imageUrl).
Thông số
| Tên | Loại | Mô tả |
imageUrl | String | Địa chỉ URL của hình ảnh được lưu trữ để sử dụng hoặc chuỗi hình ảnh đã mã hoá. |
Cầu thủ trả bóng
CardHeader – Đối tượng này, để tạo chuỗi.
setSubtitle(subtitle)
Đặt phụ đề của tiêu đề thẻ. Không bắt buộc.
Thông số
| Tên | Loại | Mô tả |
subtitle | String | Văn bản phụ đề của tiêu đề. |
Cầu thủ trả bóng
CardHeader – Đối tượng này, để tạo chuỗi.
setTitle(title)
Đặt tiêu đề của tiêu đề thẻ. Bắt buộc.
Thông số
| Tên | Loại | Mô tả |
title | String | Văn bản tiêu đề. |
Cầu thủ trả bóng
CardHeader – Đố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\u003e\u003ccode\u003eCardHeader\u003c/code\u003e objects allow you to customize the header of a card, including title, subtitle, and image, within Google Workspace Add-ons and Google Chat apps.\u003c/p\u003e\n"],["\u003cp\u003eYou can set an image for the header using \u003ccode\u003esetImageUrl()\u003c/code\u003e by providing a public URL or a base64 encoded image string.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003esetTitle()\u003c/code\u003e and \u003ccode\u003esetSubtitle()\u003c/code\u003e allow you to define the main text and supporting text for the header, respectively.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the image display with \u003ccode\u003esetImageStyle()\u003c/code\u003e to control cropping and use \u003ccode\u003esetImageAltText()\u003c/code\u003e to provide alternative text for accessibility.\u003c/p\u003e\n"]]],["The `CardHeader` object allows customization of a card's header in Google Workspace add-ons and Google Chat apps. Key actions include setting the header's title using `setTitle()`, a subtitle with `setSubtitle()`, and an image via `setImageUrl()`. The image's appearance can be modified with `setImageStyle()` for cropping and `setImageAltText()` for alternative text. Image URLs can be direct links or base64 encoded strings. Each method returns the `CardHeader` object, enabling method chaining.\n"],null,["# Class CardHeader\n\nCardHeader\n\nThe header of a [Card](/apps-script/reference/card-service/card).\n\nAvailable for Google Workspace add-ons and Google Chat apps.\n\n```javascript\nconst cardHeader = CardService.newCardHeader()\n .setTitle('Card header title')\n .setSubtitle('Card header subtitle')\n .setImageStyle(CardService.ImageStyle.CIRCLE)\n .setImageUrl('https://image.png');\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------------|-----------------|--------------------------------------------------------------------------|\n| [setImageAltText(imageAltText)](#setImageAltText(String)) | [CardHeader](#) | Sets the alternative text for the header image. |\n| [setImageStyle(imageStyle)](#setImageStyle(ImageStyle)) | [CardHeader](#) | Sets the cropping of the icon in the card header. |\n| [setImageUrl(imageUrl)](#setImageUrl(String)) | [CardHeader](#) | Sets the image to use in the header by providing its URL or data string. |\n| [setSubtitle(subtitle)](#setSubtitle(String)) | [CardHeader](#) | Sets the subtitle of the card header. |\n| [setTitle(title)](#setTitle(String)) | [CardHeader](#) | Sets the title of the card header. |\n\nDetailed documentation\n----------------------\n\n### `set``Image``Alt``Text(imageAltText)`\n\nSets the alternative text for the header image.\n\n#### Parameters\n\n| Name | Type | Description |\n|--------------------|----------|--------------------------------------------|\n| `image``Alt``Text` | `String` | The alternative text for the header image. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Image``Style(imageStyle)`\n\nSets the cropping of the icon in the card header. Defaults to no crop. Optional.\n\n#### Parameters\n\n| Name | Type | Description |\n|----------------|---------------------------------------------------------------|--------------------|\n| `image``Style` | [ImageStyle](/apps-script/reference/card-service/image-style) | The style setting. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Image``Url(imageUrl)`\n\nSets the image to use in the header by providing its URL or data string.\n\nThe provided URL can either be a publicly accessible URL or a base64 encoded image string.\nTo obtain the latter, you can use the following code to create an encoded image string from an\nimage in your Google Drive, then store that string for later use with [setImageUrl(imageUrl)](#setImageUrl(String)). This method prevents the need for your add-on to access a publicly\navailable image URL:\n\n```javascript\n// The following assumes you have the image to use in Google Drive and have its\n// ID.\nconst imageBytes = DriveApp.getFileById('123abc').getBlob().getBytes();\nconst encodedImageURL =\n `data:image/jpeg;base64,${Utilities.base64Encode(imageBytes)}`;\n\n// You can store encodeImageURL and use it as a parameter to\n// CardHeader.setImageUrl(imageUrl).\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|--------------|----------|-----------------------------------------------------------------------|\n| `image``Url` | `String` | The URL address of a hosted image to use, or an encoded image string. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Subtitle(subtitle)`\n\nSets the subtitle of the card header. Optional.\n\n#### Parameters\n\n| Name | Type | Description |\n|------------|----------|---------------------------|\n| `subtitle` | `String` | The header subtitle text. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Title(title)`\n\nSets the title of the card header. Required.\n\n#### Parameters\n\n| Name | Type | Description |\n|---------|----------|------------------|\n| `title` | `String` | The header text. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining."]]
