Trang này mô tả cách tạo các thành phần và cấu trúc của một thẻ. Thẻ là giao diện người dùng mà các ứng dụng Google Chat có thể dùng để trình bày và thu thập thông tin từ người dùng Chat. Ứng dụng trò chuyện có thể tạo và hiển thị thẻ trong các giao diện sau:
- Tin nhắn chứa một hoặc nhiều thẻ.
- Trang chủ, là một thẻ xuất hiện trong thẻ Trang chủ trong tin nhắn trực tiếp với ứng dụng Chat.
- Hộp thoại, là các thẻ mở ra trong một cửa sổ mới từ tin nhắn và trang chủ.
Trong trang này, bạn sẽ tìm hiểu về các thành phần sau của thẻ:
- Tiêu đề, thường chứa tiêu đề của thẻ hoặc phần thẻ.
- Phần, tạo thành phần chính của thẻ, bao gồm cả các tiện ích và thành phần tương tác khác. Trong một phần của thẻ, bạn có thể thêm cấu trúc vào thẻ, bao gồm cả cột và lưới.
- Chân trang cố định, xuất hiện ở cuối hộp thoại để hiển thị các phần tử trên giao diện người dùng cố định, chẳng hạn như các nút.
Điều kiện tiên quyết
Một ứng dụng Google Chat được định cấu hình để nhận và phản hồi các hoạt động tương tác của người dùng. Để tạo một ứng dụng Chat có tính tương tác, hãy hoàn tất một trong các hướng dẫn nhanh sau đây dựa trên kiến trúc ứng dụng mà bạn muốn sử dụng:
- Dịch vụ HTTP với Google Cloud Functions
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
Sử dụng Trình tạo thẻ để thiết kế và xem trước giao diện người dùng cũng như thông báo cho ứng dụng Chat:
Mở Trình tạo thẻThêm tiêu đề
Tiện ích CardHeader đại diện cho tiêu đề của thẻ. Tiêu đề có thể bao gồm tiêu đề, tiêu đề phụ và hình đại diện cho thẻ.
Sau đây là ví dụ về CardHeader:
Thêm một hoặc nhiều phần thẻ
Tiện ích CardSection là một vùng chứa cấp cao trong thẻ. Bạn sử dụng các phần thẻ để nhóm các tiện ích trong một thẻ. Đối với mỗi phần thẻ, bạn có thể thêm một tiêu đề và một hoặc nhiều tiện ích.
Sau đây là ví dụ về một CardSection chứa hai tiện ích textParagraph:
Thêm đường phân chia ngang giữa các tiện ích
Tiện ích divider hiển thị một đường kẻ ngang trải dài theo chiều rộng của thẻ giữa các tiện ích xếp chồng theo chiều dọc. Đường kẻ là một dải phân cách trực quan giúp người dùng phân biệt giữa tiện ích này với tiện ích khác, giúp thẻ dễ quét và dễ hiểu hơn.
Sau đây là một thẻ bao gồm tiện ích divider giữa các loại tiện ích khác:
Thêm cột
Tiện ích columns hiển thị tối đa 2 cột trong một thẻ. Bạn có thể thêm các tiện ích vào mỗi cột; các tiện ích sẽ xuất hiện theo thứ tự được chỉ định.
Để thêm nhiều hơn 2 cột hoặc để sử dụng hàng, hãy dùng tiện ích grid.
Chiều cao của mỗi cột được xác định theo 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 của 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 tiện ích giữa các cột.
Ví dụ sau đây cho thấy một thẻ có tiện ích columns có 2 cột văn bản. Để chỉ xem bố cục cột và thu gọn mã mẫu, hãy nhấp vào Collapse (Thu gọn).
Khi không gian bị hạn chế, như trong ví dụ sau, cột thứ hai sẽ xuống dòng bên dưới cột đầu tiên.
Xác định chiều rộng cột
Các cột được hiển thị cạnh nhau. Bạn có thể tuỳ chỉnh chiều rộng của mỗi 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ẽ xuống dòng bên dưới cột đầu tiên:
- Trên web, cột thứ hai sẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 480 pixel.
- Trên thiết bị iOS, cột thứ hai sẽ 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ẽ xuống dòng nếu chiều rộng màn hình nhỏ hơn hoặc bằng 320 dp.
Ví dụ sau đây cho thấy một thẻ có tiện ích columns, trong đó có
2 cột văn bản với 4 mục trong các cột. Mỗi mục trong các cột đều được áp dụng horizontalSizeStyle để điều chỉnh không gian mà văn bản lấp đầy mỗi cột:
- Đoạn văn bản đầu tiên sử dụng
FILL_MINIMUM_SPACEđể lấp đầy không quá 30% chiều rộng của thẻ. - Đoạn văn bản thứ hai sử dụng
FILL_AVAILABLE_SPACEđể lấp đầy không gian có sẵn trong chiều rộng của thẻ. Trong ví dụ này, thanh tiến trình lấp đầy 70% chiều rộng của thẻ. - Đoạn văn bản thứ ba không xác định
horizontalSizeStylenên theo mặc định, đoạn này sẽ lấp đầy không gian còn trống của thẻ. - Đoạn văn bản thứ tư sử dụng
FILL_MINIMUM_SPACEđể lấp đầy không quá 30% chiều rộng của thẻ.
Xác định cách căn chỉnh ngang của một cột
Bạn có thể căn chỉnh các tiện ích theo chiều ngang sang trái, phải hoặc giữa cột bằng cách xác định trường horizontalAlignment.
Nếu trường horizontalAlignment không được xác định, thì các tiện ích sẽ được căn chỉnh sang bên trái trong một cột.
Ví dụ sau đây căn chỉnh văn bản theo chiều ngang trong một cột sang bên trái:
Ví dụ sau đây căn giữa văn bản theo chiều ngang trong một cột:
Ví dụ sau đây căn chỉnh văn bản theo chiều ngang trong một cột sang bên phải:
Xác định cách căn chỉnh dọc của một cột
Bạn có thể căn chỉnh các tiện ích theo chiều dọc lên trên cùng, xuống dưới cùng hoặc vào giữa một cột bằng cách xác định trường verticalAlignment.
Nếu trường verticalAlignment không được xác định, thì các tiện ích trong một cột sẽ được căn chỉnh lên trên cùng.
Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột lên trên cùng:
Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột ở giữa:
Ví dụ sau đây căn chỉnh văn bản theo chiều dọc trong một cột ở dưới cùng:
Thêm lưới để hiển thị một tập hợp các mục
Tiện ích grid hiển thị một lưới có tập hợp các mục. Lưới hỗ trợ số lượng cột và mục bất kỳ. Số hàng được xác định bằng cách lấy số mục chia cho số cột.
Một lưới có 10 mục và 2 cột sẽ có 5 hàng. Một lưới có 11 mục và 2 cột sẽ có 6 hàng.
Tiện ích này hỗ trợ các đề xuất giúp người dùng nhập dữ liệu đồng nhất và các hành động khi thay đổi, tức là Actions chạy khi có thay đổi trong trường nhập văn bản, chẳng hạn như người dùng thêm hoặc xoá văn bản.
Ví dụ sau đây là lưới 2 cột có một mục:
Để xác định vị trí văn bản xuất hiện cùng với hình ảnh trong lưới, bạn có thể chỉ định
trường gridItemLayout.
Trường này cho phép bạn xác định xem văn bản xuất hiện ở phía trên hay phía dưới
mục trong lưới. Nếu bạn không xác định gridItemLayout, thì theo mặc định, văn bản sẽ xuất hiện bên dưới mục trong lưới.
Ví dụ sau đây là một lưới ba cột có văn bản và hình ảnh trong mỗi lưới. Lưới đầu tiên xác định văn bản xuất hiện phía trên hình ảnh, lưới thứ hai xác định văn bản xuất hiện bên dưới hình ảnh và lưới thứ ba không xác định vị trí của văn bản.
Thêm đường viền vào lưới hoặc cột
Đối với các mục xuất hiện trong tiện ích column hoặc grid, bạn có thể thêm đường viền vào các phần tử trên giao diện người dùng này bằng cách xác định một trường borderType và một trường borderStyle.
Nếu không có trường borderStyle nào được xác định, thì theo mặc định, trường này sẽ không hiển thị đường viền. Bạn có thể
xác định borderType để áp dụng cho tất cả các mục trong một tiện ích hoặc áp dụng kiểu
cho từng mục trong một tiện ích.
Ví dụ sau đây là một lưới 2 cột có hình ảnh trong mỗi lưới, trong đó loại, kiểu và màu đường viền đã được xác định để áp dụng cho tất cả các mục trong lưới.
Ví dụ sau đây là một lưới 3 cột có hình ảnh trong mỗi lưới, đồng thời kiểu và loại đường viền được xác định riêng. Hình ảnh đầu tiên có đường viền được xác định là STROKE. Hình ảnh thứ hai có đường viền được xác định là NO_BORDER. Hình ảnh thứ ba không có đường viền xác định.
Thêm băng chuyền
Tiện ích Carousel cho thấy một tập hợp các đối tượng CarouselCard có thể cuộn trên màn hình. Bạn có thể thêm nhiều tiện ích
vào mỗi CarouselCard.
Thêm chân trang cố định
Tiện ích CardFixedFooter đại diện cho chân trang của một thông báo hộp thoại do ứng dụng Chat gửi. Chân trang có thể bao gồm một nút chính và một nút phụ.
Tiện ích CardFixedFooter chỉ dùng được cho hộp thoại.
Sau đây là ví dụ về một tiện ích CardFixedFooter có hai nút:
Khắc phục sự cố
Khi một ứng dụng Google Chat hoặc thẻ trả về lỗi, giao diện Chat sẽ hiển thị thông báo "Đã xảy ra lỗi". hoặc "Không thể xử lý yêu cầu của bạn". Đôi khi, giao diện người dùng của Chat không hiển thị thông báo lỗi, nhưng ứng dụng Chat hoặc thẻ lại tạo ra kết quả không mong muốn; ví dụ: thông báo dạng thẻ có thể không xuất hiện.
Mặc dù thông báo lỗi có thể không xuất hiện trong giao diện người dùng của Chat, nhưng thông báo lỗi mô tả và dữ liệu nhật ký sẽ giúp bạn khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho ứng dụng Chat. Để được trợ giúp xem, gỡ lỗi và khắc phục lỗi, hãy xem bài viết Khắc phục sự cố và sửa lỗi trong Google Chat.