Antarmuka berbasis kartu

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Contoh kartu add-on

Add-on Google Workspace menyajikan informasi dan kontrol pengguna di sidebar UI aplikasi host. Add-on terdiri dari toolbar pengidentifikasi utama beserta satu atau beberapa kartu.

Setiap kartu mewakili 'halaman' UI add-on, dan menavigasi ke kartu baru biasanya merupakan masalah untuk membuat kartu tersebut dan mendorongnya ke tumpukan kartu internal. Anda dapat menentukan alur navigasi antar-kartu untuk pengalaman interaksi yang kaya.

Kartu dapat bersifat non-kontekstual atau kontekstual. Kartu kontekstual ditampilkan kepada pengguna jika aplikasi host berada dalam konteks tertentu. Misalnya, saat membuka pesan Gmail atau acara Kalender. Kartu non-kontekstual (seperti halaman beranda) ditampilkan kepada pengguna di luar konteks host tertentu. Misalnya, saat pengguna melihat kotak masuk Gmail, folder Drive utama, atau kalender mereka.

Add-on Google Workspace yang dibuat di Apps Script menggunakan Layanan kartu untuk membuat antarmuka pengguna dari kartu. Add-on yang dibuat dalam bahasa lain harus menampilkan JSON yang diformat dengan benar agar antarmuka dapat dirender sebagai kartu.

Setiap kartu terdiri dari satu header dan satu atau beberapa bagian kartu. Setiap bagian terdiri dari kumpulan widget. Widget menampilkan informasi kepada pengguna atau menyediakan kontrol interaksi seperti tombol.

Antarmuka berbasis kartu memiliki manfaat berikut:

  • Pengetahuan tentang HTML atau CSS tidak diperlukan untuk membuat antarmuka berbasis kartu.
  • Kartu dan widget secara otomatis diatur agar berfungsi dengan baik dengan aplikasi Google Workspace yang diperluas.
  • Antarmuka berbasis kartu berfungsi pada perangkat desktop dan seluler, tetapi Anda hanya perlu menentukan antarmuka satu kali.

Membuat antarmuka berbasis kartu

Saat membuat add-on berbasis kartu, penting untuk memahami konsep dan pola desain tertentu. Panduan berikut ini memberikan informasi yang Anda butuhkan untuk membuat add-on berbasis kartu yang efektif:

Referensikan halaman ini saat membuat kartu dan menerapkan perilaku UI. Anda juga dapat menemukan contoh tambahan berikut yang berguna sebagai referensi saat menerapkan add-on: