Halaman ini menjelaskan cara memformat dan menyusun widget dalam pesan kartu atau dialog.
Gunakan Card Builder untuk mendesain dan melihat pratinjau pesan kartu JSON untuk aplikasi Chat:
Buka Pembuat KartuPrasyarat
Menampilkan kartu dan dialog dalam kolom
Widget columns
menampilkan hingga 2 kolom dalam kartu atau dialog. Anda dapat menambahkan
widget ke setiap kolom; widget akan muncul dalam 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 jumlah widget yang berbeda, Anda tidak dapat menentukan baris atau menyelaraskan widget antar-kolom.
Contoh berikut menampilkan kartu dengan widget columns
yang menampilkan 2 kolom teks. Untuk melihat tata letak kolom saja dan menciutkan contoh
kode, klik Ciutkan.
Jika ruang dibatasi, seperti dalam contoh berikut, kolom kedua akan ditempatkan di bawah kolom pertama.
Menentukan lebar kolom
Kolom ditampilkan 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 poin.
- Pada perangkat Android, kolom kedua 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 dalam kolom. Setiap item dalam kolom memiliki
horizontalSizeStyle
yang diterapkan untuk memanipulasi jumlah ruang yang diisi
teks pada setiap kolom:
- Paragraf teks pertama menggunakan
FILL_MINIMUM_SPACE
untuk mengisi maksimal 30% lebar kartu. - Paragraf teks kedua menggunakan
FILL_AVAILABLE_SPACE
untuk mengisi ruang yang tersedia pada lebar kartu. Dalam contoh ini, elemen ini mengisi 70% dari lebar kartu. - Paragraf teks ketiga tidak menentukan
horizontalSizeStyle
sehingga akan secara default mengisi ruang yang tersedia di ruang kartu. - Paragraf teks keempat menggunakan
FILL_MINIMUM_SPACE
untuk mengisi maksimal 30% lebar kartu.
Menentukan perataan horizontal kolom
Anda dapat meratakan widget secara horizontal ke kiri, kanan, atau tengah kolom dengan
menentukan
kolom horizontalAligment
.
Jika fiield horizontalAlignment
tidak ditentukan, widget akan disejajarkan 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 menyelaraskan widget secara vertikal ke bagian atas, bawah, atau tengah kolom dengan
menentukan
kolom verticalAlignment
.
Jika kolom verticalAlignment
tidak ditentukan, widget dalam kolom akan disejajarkan
dengan bagian atas.
Contoh berikut meratakan teks secara vertikal dalam kolom ke atas:
Contoh berikut meratakan teks secara vertikal dalam kolom di tengah:
Contoh berikut meratakan teks secara vertikal dalam kolom di bagian bawah:
Menambahkan pemisah horizontal di antara widget
Widget divider
menampilkan garis horizontal yang membentang selebar kartu di antara widget yang ditumpuk secara vertikal. Garis ini merupakan pemisah visual yang membantu
pengguna membedakan antara satu widget dan widget lainnya, sehingga kartu lebih mudah dipindai dan
dipahami.
Berikut adalah kartu yang terdiri dari widget divider
di antara jenis widget
lainnya:
Menampilkan petak dengan koleksi item
Widget
grid
menampilkan petak dengan koleksi item. {i>Grid<i} mendukung berapa
pun kolom dan item. Jumlah baris ditentukan oleh item dibagi dengan kolom.
Petak dengan 10 item dan 2 kolom memiliki 5 baris. Sebuah {i>grid<i} dengan 11 item dan 2
kolom memiliki 6 baris.
Widget mendukung saran, yang membantu pengguna memasukkan data seragam, dan
tindakan atas perubahan, yaitu
Actions
yang dijalankan saat terjadi perubahan di kolom input teks, seperti pengguna yang menambahkan atau
menghapus teks.
Contoh berikut adalah petak 2 kolom dengan satu item:
Menentukan di mana teks muncul dengan gambar dalam petak
Kolom
gridItemLayout
memungkinkan Anda menentukan dalam setiap gridItem
, baik teks muncul di atas atau di bawah
item dalam petak. Jika gridItemLayout
tidak ditentukan, teks secara default akan
muncul di bawah item dalam petak
Contoh berikut adalah petak 3 kolom dengan teks dan gambar di setiap petak. Petak pertama menentukan teks yang muncul di atas gambar, petak kedua menentukan teks yang akan muncul di bawah gambar, dan petak ketiga tidak menentukan posisi teks.
Menambahkan batas ke elemen UI
Untuk item yang muncul di widget column
atau grid
, Anda dapat menambahkan batas ke
elemen UI ini dengan menentukan
kolom borderType
dan
kolom borderStyle
.
Jika tidak ada kolom borderStyle
yang ditentukan, secara default tidak akan menampilkan batas. Anda dapat menentukan borderType
untuk diterapkan ke semua item dalam widget atau menerapkan gaya ke setiap item dalam widget.
Contoh berikut adalah petak 2 kolom dengan gambar di setiap petak, dengan jenis batas, gaya, dan warna telah ditentukan untuk diterapkan ke semua item dalam petak.
Contoh berikut adalah petak 3 kolom dengan gambar di setiap petak serta
gaya dan jenis batas yang ditentukan satu per satu. Gambar
pertama memiliki batas yang ditentukan sebagai STROKE
. Gambar kedua memiliki batas yang didefinisikan sebagai
NO_BORDER
. Gambar ketiga tidak memiliki batas yang ditentukan.
Memecahkan masalah
Saat aplikasi atau kartu Google Chat menampilkan error, antarmuka Chat akan menampilkan pesan yang menyatakan "Terjadi masalah". atau "Tidak dapat memproses permintaan Anda". Terkadang UI Chat tidak menampilkan pesan error apa pun, tetapi aplikasi atau kartu Chat memberikan hasil yang tidak diharapkan. Misalnya, pesan kartu mungkin tidak 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 mendapatkan bantuan dalam melihat, men-debug, dan memperbaiki error, lihat Memecahkan masalah dan memperbaiki error Google Chat.
Topik terkait
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType