Trang này được dịch bởi Cloud Translation API.

Định dạng cấu trúc của thẻ hoặc hộp thoại

Trang này giải thích cách định dạng và sắp xếp các tiện ích trong thẻ hoặc thông báo hộp thoại.

Thiết kế và xem trước thẻ bằng Trình tạo thẻ.

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

Một tài khoản Google Workspace có quyền truy cập vào Google Chat.

Một ứng dụng Chat đã phát hành. Để tạo ứng dụng Chat, hãy làm theo phần quickstart này.

Hiện thẻ và hộp thoại trong 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 từng cột; các tiện ích sẽ xuất hiện theo thứ tự được chỉ định. Để bao gồm nhiều hơn 2 cột hoặc để sử dụng hàng, hãy sử dụng tiện ích grid.

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 một 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 hiển thị 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 Thu gọn. Khi không gian bị hạn chế, như trong ví dụ sau, cột thứ hai sẽ gói bên dưới cột đầu tiên.

Xác định chiều rộng của 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 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ẽ xuống dưới cột thứ nhất:

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

Ví dụ sau đây sẽ 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 sẽ căn chỉnh văn bản theo chiều ngang trong một cột ở giữa:

Ví dụ sau đây sẽ căn chỉnh văn bản theo chiều ngang trong một cột ở 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 trên cùng, dưới cùng 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 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 đường phân chia theo chiều ngang giữa các tiện ích

Tiện ích divider hiển thị một đường ngang trải rộng qua chiều rộng của thẻ giữa các tiện ích được xếp chồng theo chiều dọc. Đường này là một đường phân chia trực quan giúp người dùng phân biệt giữa tiện ích này và tiện ích khác, giúp việc quét và hiểu các thẻ dễ dàng 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:

Hiển thị lưới gồm một tập hợp các mục

Tiện ích grid hiển thị một lưới với một 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 theo mục chia cho cột. Một lưới có 10 mục và 2 cột 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à các thao tác thay đổi (Actions sẽ 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 chứa một mục duy nhất:

Xác định vị trí văn bản sẽ xuất hiện cùng với hình ảnh trong một lưới

Trường gridItemLayout cho phép bạn xác định trong mỗi gridItem, liệu văn bản sẽ xuất hiện ở trên hay phía dưới mục trong lưới. Nếu gridItemLayout là không xác định, 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 gồm 3 cột, trong đó 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 sẽ xuất hiện ở phía trên hình ảnh, lưới thứ hai xác định văn bản sẽ 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 các thành phần trên giao diện người dùng

Đối với các mục xuất hiện trong column hoặc tiện ích 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 trường borderType và 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 đường viền. Bạn có thể xác định borderType để áp dụng cho mọi mục trong một tiện ích hoặc áp dụng kiểu cho từng mục riêng lẻ trong một tiện ích.

Ví dụ sau đây là một lưới gồm 2 cột, trong đó mỗi lưới lại có một hình ảnh, 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à một lưới gồm 3 cột, với một hình ảnh trong mỗi lưới, kiểu và kiểu đườ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 chưa xác định đường viền.

Khắc phục sự cố

Khi ứ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 nào, nhưng ứng dụng hoặc thẻ Chat cho 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 hiển thị trong giao diện người dùng Chat, nhưng chúng tôi cung cấp dữ liệu nhật ký và thông báo lỗi mô tả để giúp bạn khắc phục lỗi khi bật tính năng ghi nhật ký lỗi cho các ứng dụng trong Chat. Để được trợ giúp về việc xem, gỡ lỗi và sửa lỗi, hãy xem phần Khắc phục sự cố và sửa lỗi trên Google Chat.