Memformat struktur kartu atau dialog

Halaman ini menjelaskan cara memformat dan menyusun widget dalam pesan kartu atau dialog.


Desain dan pratinjau kartu dengan Pembuat Kartu.

Buka Pembuat Kartu

Prasyarat

  • Akun Google Workspace dengan akses ke Google Chat.
  • Aplikasi Chat yang dipublikasikan. Untuk mem-build aplikasi Chat, ikuti quickstart ini.
  • 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.