Giao diện dựa trên thẻ

Ví dụ về thẻ tiện ích bổ sung

Các tiện ích bổ sung của Google Workspace trình bày thông tin và các chế độ kiểm soát của người dùng trong thanh bên của giao diện người dùng ứng dụng lưu trữ. Tiện ích bổ sung bao gồm một thanh công cụ nhận dạng chính cùng với một hoặc nhiều thẻ.

Mỗi thẻ đại diện cho một "trang" cụ thể của giao diện người dùng của tiện ích bổ sung và việc chuyển đến thẻ mới thường chỉ là việc tạo thẻ đó và đẩy thẻ đó vào ngăn xếp thẻ nội bộ. Bạn có thể xác định luồng điều hướng giữa các thẻ để có trải nghiệm tương tác phong phú.

Thẻ có thể là không theo bối cảnh hoặc theo bối cảnh. Thẻ theo ngữ cảnh được trình bày cho người dùng khi ứng dụng lưu trữ ở một ngữ cảnh cụ thể. Ví dụ: khi mở thư trên Gmail hoặc sự kiện trên Lịch. Thẻ không theo ngữ cảnh (chẳng hạn như trang chủ) được trình bày cho người dùng bên ngoài ngữ cảnh cụ thể của máy chủ. Ví dụ: khi người dùng xem hộp thư đến của Gmail, thư mục chính trên Drive hoặc Lịch.

Các tiện ích bổ sung của Google Workspace được tích hợp trong Apps Script sử dụng Dịch vụ thẻ để tạo giao diện người dùng từ các thẻ. Các tiện ích bổ sung được tạo bằng ngôn ngữ khác phải trả về JSON được định dạng đúng cách để giao diện hiển thị dưới dạng thẻ.

Mỗi thẻ bao gồm một tiêu đề và một hoặc nhiều phần thẻ. Mỗi phần bao gồm một tập hợp tiện ích. Tiện ích hiển thị thông tin cho người dùng hoặc cung cấp các chế độ điều khiển tương tác như nút.

Giao diện dựa trên thẻ có các lợi ích sau:

  • Bạn không cần có kiến thức về HTML hoặc CSS để tạo giao diện dựa trên thẻ.
  • Thẻ và tiện ích được tự động tạo kiểu để hoạt động tốt với các ứng dụng Google Workspace mà chúng mở rộng.

  • Giao diện dựa trên thẻ hoạt động trên cả máy tính và thiết bị di động, nhưng bạn chỉ cần xác định giao diện một lần.

Tạo giao diện dựa trên thẻ

Khi xây dựng các tiện ích bổ sung dựa trên thẻ, điều quan trọng là bạn phải hiểu một số khái niệm và mẫu thiết kế nhất định. Các hướng dẫn sau đây cung cấp thông tin bạn cần để tạo các tiện ích bổ sung hiệu quả dựa trên thẻ:

Tham khảo các trang này khi tạo thẻ và triển khai hành vi giao diện người dùng. Bạn cũng có thể thấy các mẫu bổ sung sau đây hữu ích để tham khảo khi triển khai tiện ích bổ sung: