Tạo thẻ cho các ứng dụng trong Google Chat

Trang này mô tả cách xây dựng các thành phần và cấu trúc của một thẻ. Thẻ do người dùng giao diện mà các ứng dụng Google Chat có thể dùng để trình bày và thu thập của người dùng Chat. Các ứng dụng trong Chat có thể tạo và hiển thị thẻ trong các giao diện sau:

  • Tin nhắn có chứa một hoặc nhiều thẻ.
  • Trang chủ, là thẻ xuất hiện từ tab Trang chủ trực tiếp tin nhắn bằng ứng dụng Chat.
  • Hộp thoại, là các thẻ sẽ mở ra trong 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 đây của thẻ:

  • Tiêu đề, thường chứa tiêu đề của một thẻ hoặc thẻ .
  • Phần, tạo thành phần nội dung chính của thẻ bao gồm các tiện ích và các thành phần tương tác khác. Trong thẻ , bạn có thể thêm cấu trúc khác vào thẻ, bao gồm cá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 thành phần cố định trên giao diện người dùng, chẳng hạn như nút.

Điều kiện tiên quyết

Một ứng dụng Google Chat đã bật các tính năng tương tác. Để tạo một ứng dụng Chat tương tác, hãy hoàn thành một trong các bước bắt đầu nhanh sau đây trên cấu trúc ứng dụng mà bạn muốn sử dụng:

Sử dụng Trình tạo thẻ để thiết kế và xem trước thông báo cũng như giao diện người dùng của các ứng dụng trong Chat:

Mở Trình tạo thẻ

Thêm tiêu đề

Tiện ích CardHeader biểu thị cho tiêu đề của thẻ. Tiêu đề có thể bao gồm tiêu đề, phụ đề và hình đại diện cho thẻ của bạn.

Sau đây là ví dụ về một CardHeader:

Thêm một hoặc nhiều mục thẻ

Tiện ích CardSection là vùng chứa cấp cao trong một thẻ. Bạn dùng thẻ để nhóm các tiện ích bên trong một thẻ. Đối với mỗi phần thẻ, bạn có thể thêm tiêu đề và một hoặc nhiều tiện ích.

Sau đây là ví dụ về CardSection chứa hai textParagraph tiện ích:

Thêm một đường phân chia theo chiều ngang giữa các tiện ích

Chiến lược phát hành đĩa đơn Tiện ích divider hiển thị một đường ngang trải dài toàn bộ chiều rộng của một thẻ giữa các tiện ích được xếp chồng theo chiều dọc. Đường kẻ này là một dải phân cách trực quan giúp người dùng phân biệt giữa một tiện ích và một tiện ích khác, giúp thẻ dễ quét hơn và hiểu rõ.

Sau đây là một thẻ bao gồm tiện ích divider giữa các loại tiện ích:

Thêm cột

Chiến lược phát hành đĩa đơn Tiện ích columns hiển thị tối đa 2 cột trong một thẻ. Bạn có thể thêm tiện ích cho mỗi cột; các tiện ích sẽ xuất hiện theo thứ tự đã 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 do cột cao hơn xác định. Ví dụ: nếu cột đầu tiên cao hơn cột thứ hai, 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 một số khác nhau tiện ích con, 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 làm nổi bật 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 Thu gọn. Khi không gian bị hạn chế, như trong ví dụ sau, cột thứ hai bao bọc bên dưới cột đầu tiên.

Xác định chiều rộng 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 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ẽ bao bọc bên dưới đầu tiên:

  • Trên web, cột thứ hai sẽ gói 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ẽ gói 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ẽ gói 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 làm nổi bật 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 có Đã áp dụng horizontalSizeStyle để điều chỉnh khoảng không gian của văn bản điền từng 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 để điền vào trong chiều rộng của thẻ. Trong ví dụ này, nó lấp đầy 70% thời lượng của thẻ chiều rộng.
  • Đoạn văn bản thứ ba không xác định horizontalSizeStyle nên đoạn văn bản này mặc định để lấp đầy không gian có sẵn của không gian 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 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 horizontalAligment. Nếu fiield horizontalAlignment không xác định, các tiện ích sẽ được căn chỉnh với bên trái trong cột.

Ví dụ sau đây về căn chỉnh văn bản theo chiều ngang trong một cột bên trái:

Ví dụ sau đây về căn chỉnh văn bản theo chiều ngang trong một cột ở chính giữa:

Ví dụ sau đây về căn chỉnh văn bản theo chiều ngang trong một cột về bên phải:

Xác định cách căn chỉnh dọc của cột

Bạn có thể căn chỉnh các tiện ích theo chiều dọc lên đầu, cuối hoặc giữa cột bằng cách xác định Trường verticalAlignment. Nếu trường verticalAlignment không xác định, 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 về việc 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 về căn chỉnh văn bản theo chiều dọc trong một cột ở giữa:

Ví dụ sau đây về việc căn chỉnh văn bản theo chiều dọc trong một cột ở dưới cùng:

Thêm một lưới để hiển thị một tập hợp các mục

Chiến lược phát hành đĩa đơn Tiện ích grid hiển thị một lưới gồm một tập hợp các mục. Lưới hỗ trợ bất kỳ số lượng cột và mục. Số lượng hàng được xác định theo số mục chia cho cột. Một lưới gồm 10 mục và 2 cột sẽ có 5 hàng. Một lưới có 11 mục và 2 cột 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à hành động khi thay đổi, Actions chạy khi có thay đổi xảy ra trong trường nhập dữ liệu văn bản, chẳng hạn như khi người dùng thêm hoặc đang xoá văn bản.

Ví dụ sau đây là lưới gồm 2 cột có một mục duy nhất:

Để 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 ở trên hay ở dưới mục trong lưới. Nếu gridItemLayout không xác định, văn bản mặc định là xuất hiện bên dưới mục trong lưới.

Ví dụ sau đây là một lưới 3 cột có văn bản và một 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 lưới sẽ xác định văn bản xuất hiện bên dưới hình ảnh, còn 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 cho các thành phần này trên giao diện người dùng bằng cách xác định Trường borderType và một trường borderStyle. Nếu bạn không xác định trường borderStyle, 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 riêng lẻ trong tiện ích.

Ví dụ sau đây là lưới 2 cột với một hình ảnh ở mỗi lưới trong đó loại đường viền, kiểu và màu sắc đã được xác định để áp dụng cho tất cả các mục trong lưới.

Ví dụ sau đây là lưới 3 cột với một hình ảnh ở mỗi lưới và kiểu và loại đường viền được xác định riêng. Đầu tiên hình ảnh 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 chưa xác định đường viền.

CardFixedFooter tiện ích con đại diện cho chân trang của thông báo hộp thoại được gửi bởi ứng dụng Chat. 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ành cho hộp thoại.

Sau đây là ví dụ về tiện ích CardFixedFooter có 2 nút:

Khắc phục sự cố

Khi một ứng dụng Google Chat hoặc card trả về một lỗi, thì phương thức Giao diện Chat hiển thị một thông báo với nội dung "Đã 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ông báo lỗi nào ngoài ứng dụng Chat hoặc thẻ tạo ra kết quả không mong muốn; ví dụ: thông báo 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 Chat, thông báo lỗi mô tả và dữ liệu nhật ký luôn có sẵn để giúp bạn sửa lỗi khi tính năng ghi nhật ký lỗi cho các ứng dụng trong Chat được bật. Để được trợ giúp xem, gỡ lỗi và sửa lỗi, hãy xem Khắc phục lỗi và khắc phục lỗi của Google Chat.