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 BuilderPrasyarat
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:
- Layanan HTTP dengan Google Cloud Functions
- Skrip Google Apps
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
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.
Topik terkait
columns
horizontalSizeStyle
horizontalAligment
verticalAlignment
divider
grid
gridItemLayout
borderStyle
borderType