Memformat struktur kartu atau dialog

Halaman ini menjelaskan cara memformat dan menyusun widget dalam kartu atau dialog untuk membuat pesan email baru.

Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:

Membuka Card Builder

Prasyarat

Aplikasi Google Chat yang diaktifkan untuk fitur interaktif. Untuk membuat aplikasi Chat interaktif, selesaikan salah satu panduan memulai berikut berdasarkan pada arsitektur aplikasi yang ingin Anda gunakan:

Menampilkan kartu dan dialog dalam kolom

Tujuan Widget columns menampilkan hingga 2 kolom dalam kartu atau dialog. Anda dapat menambahkan widget ke setiap kolom; widget muncul sesuai urutan yang ditentukan. Untuk menyertakan lebih dari 2 kolom, atau menggunakan baris, gunakan widget grid.

Ketinggian setiap kolom ditentukan oleh kolom yang lebih tinggi. Misalnya, jika kolom pertama lebih tinggi dari kolom kedua, kedua kolom memiliki tinggi kolom pertama. Karena setiap kolom dapat berisi angka yang berbeda widget, Anda tidak dapat menentukan baris atau meratakan widget di antara kolom.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks. Untuk melihat tata letak kolom saja dan menciutkan kode contoh, klik Ciutkan. Ketika ruang dibatasi, seperti dalam contoh berikut, kolom kedua yang digabungkan di bawah kolom pertama.

Menentukan lebar kolom

Kolom ditampilkan secara berdampingan. Anda dapat menyesuaikan lebar setiap kolom menggunakan Kolom horizontalSizeStyle. Jika lebar layar pengguna terlalu sempit, kolom kedua akan digabungkan di bawah yang pertama:

  • Di web, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 480 piksel.
  • Pada perangkat iOS, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 300 pt.
  • Pada perangkat Android, kolom kedua akan digabungkan jika lebar layar kurang dari atau sama dengan 320 dp.

Contoh berikut menampilkan kartu dengan widget columns yang menampilkan 2 kolom teks dengan 4 item di kolom. Setiap item dalam kolom memiliki horizontalSizeStyle diterapkan untuk memanipulasi seberapa besar ruang teks mengisi setiap kolom:

  • Paragraf teks pertama menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% dari lebar kartu.
  • Paragraf teks kedua menggunakan FILL_AVAILABLE_SPACE untuk mengisi teks yang tersedia spasi selebar kartu. Dalam contoh ini, ini mengisi 70% dari lebarnya.
  • Paragraf teks ketiga tidak menentukan horizontalSizeStyle, jadi default-nya untuk mengisi ruang yang tersedia pada kartu.
  • Paragraf teks keempat menggunakan FILL_MINIMUM_SPACE untuk mengisi tidak lebih dari 30% dari lebar kartu.

Menentukan perataan horizontal kolom

Anda dapat meratakan widget secara horizontal ke kiri, kanan, atau tengah kolom dengan mendefinisikan Kolom horizontalAligment. Jika kolom horizontalAlignment tidak ditentukan, widget akan disejajarkan dengan ke kiri di kolom.

Contoh berikut meratakan teks secara horizontal dalam kolom ke kiri:

Contoh berikut meratakan teks secara horizontal dalam kolom di tengah:

Contoh berikut meratakan teks secara horizontal dalam kolom ke kanan:

Menentukan perataan vertikal kolom

Anda dapat meratakan widget secara vertikal ke bagian atas, bawah, atau tengah kolom dengan mendefinisikan Kolom verticalAlignment. Jika kolom verticalAlignment tidak ditentukan, widget dalam kolom akan disejajarkan ke atas.

Contoh berikut meratakan teks secara vertikal dalam kolom ke atas:

Contoh berikut meratakan teks secara vertikal dalam kolom di bagian tengah:

Contoh berikut meratakan teks secara vertikal dalam kolom di bagian bawah:

Menambahkan pemisah horizontal antar-widget

Tujuan Widget divider menampilkan garis horizontal yang membentang selebar kartu di antara widget yang ditumpuk secara vertikal. Garis adalah pemisah visual yang membantu pengguna dapat membedakan satu widget dengan widget lainnya, sehingga kartu lebih mudah dipindai dan pahami.

Berikut adalah kartu yang terdiri dari widget divider di antara jenis widget lainnya widget:

Menampilkan petak dengan koleksi item

Tujuan Widget grid menampilkan petak dengan kumpulan item. Suatu {i>grid<i} mendukung sejumlah kolom dan item. Jumlah baris ditentukan dengan item dibagi dengan kolom. Grid dengan 10 item dan 2 kolom memiliki 5 baris. Sebuah {i>grid<i} dengan 11 item dan 2 memiliki 6 baris.

Widget mendukung saran, yang membantu pengguna memasukkan data yang seragam, dan tindakan sesuai perubahan, yaitu Actions yang berjalan ketika terjadi perubahan di isian {i>input <i}teks, seperti pengguna menambahkan atau menghapus teks.

Contoh berikut adalah petak 2 kolom dengan satu item:

Menentukan tempat teks muncul dengan gambar dalam petak

Tujuan Kolom gridItemLayout memungkinkan Anda menentukan di dalam setiap gridItem, apakah teks muncul di atas atau di bawah item di {i>grid<i}. Jika gridItemLayout tidak ditentukan, teks akan ditetapkan secara default ke muncul di bawah item pada petak

Contoh berikut adalah kisi-kisi 3 kolom dengan teks dan gambar di setiap {i>grid<i}. {i>Grid<i} pertama menentukan teks yang akan muncul di atas gambar, {i>grid <i}kedua {i>grid <i}menentukan teks yang akan muncul di bawah gambar, dan {i>grid<i} ketiga tidak posisi teks.

Menambahkan {i>border<i} ke elemen UI

Untuk item yang muncul di widget column atau grid, Anda dapat menambahkan batas ke elemen UI ini dengan mendefinisikan Kolom borderType dan Kolom borderStyle. Jika tidak ada kolom borderStyle yang ditentukan, kolom ini secara default tidak menampilkan batas. Anda dapat menentukan borderType untuk diterapkan ke semua item dalam widget atau menerapkan gaya visual ke setiap item individual dalam widget.

Contoh berikut adalah kisi-kisi 2 kolom dengan gambar di setiap kisi-kisi di mana jenis batas, gaya, dan warna telah ditetapkan untuk diterapkan ke semua item dalam {i>grid.<i}

Contoh berikut adalah {i>grid<i} 3 kolom dengan gambar di setiap {i>grid<i} dan gaya garis batas dan jenis yang ditentukan satu per satu. Yang pertama gambar memiliki batas yang ditetapkan sebagai STROKE. Gambar kedua memiliki batas yang didefinisikan sebagai NO_BORDER. Gambar ketiga tidak memiliki batas yang ditentukan.

Memecahkan masalah

Saat aplikasi Google Chat atau kartu menampilkan error, Antarmuka Chat menampilkan pesan yang bertuliskan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi Chat atau memberikan hasil yang tidak diharapkan; misalnya, pesan kartu mungkin tidak akan muncul.

Meskipun pesan error mungkin tidak ditampilkan di UI Chat, pesan error deskriptif dan data log tersedia untuk membantu Anda memperbaiki error saat logging error untuk aplikasi Chat diaktifkan. Untuk bantuan melihat, men-debug, dan memperbaiki error, melihat Memecahkan masalah dan memperbaiki error Google Chat.