Item yang dapat diperluas adalah chip kustom yang menampilkan konten tambahan secara inline.
Chip item yang dapat diperluas
Item yang dapat diperluas memungkinkan aplikasi menyertakan konten kepadatan tinggi dengan sedikit ruang di layar. Gunakan komponen ini jika Anda ingin membuat aplikasi tetap ringkas sekaligus memungkinkan pengguna mengakses cepat ke konten tambahan.
Gunakan komponen ini agar pengguna dapat melakukan tugas berikut:
- Tampilkan lebih banyak item daftar (chip, kartu)
- Tampilkan teks lainnya
Anatomi
Daftar yang diperluas
Chip harus berada di tengah.
A. Label
Teks label dapat disesuaikan. Defaultnya adalah "Tampilkan lebih banyak".
B. Penampung
Tombol harus menyertakan batas penampung.
C. Ikon luaskan
Ikon default adalah tanda V yang menghadap ke bawah, yang dapat disesuaikan atau
dihapus. Ikon diratakan kanan untuk lokalitas bahasa LTR, dan
diratakan ke kiri untuk lokalitas bahasa RTL.
Memperluas teks
Chip harus rata tengah.
A. Label
Teks label dapat disesuaikan. Defaultnya adalah "Lainnya".
B. Penampung
Tombol ini memiliki dua varian: dengan garis batas dan tanpa garis batas.
C. Ikon luaskan
Ikon default adalah tanda V yang menghadap ke bawah, yang dapat disesuaikan atau
dihapus. Ikon diratakan kanan untuk lokalitas bahasa LTR, dan
diratakan ke kiri untuk lokalitas bahasa RTL.
Perilaku
Memperluas daftar
Ketuk chip untuk meluaskan dan menampilkan lebih banyak item dalam daftar. Tindakan perluasan akan dianimasikan, menyembunyikan teks Show more dan menampilkan item lainnya dalam satu gerakan yang lancar. Anda dapat menyesuaikan jumlah item yang ditampilkan dalam status diciutkan. Jumlah item yang disarankan adalah tiga.
Memperluas teks
Ketuk chip untuk meluaskan dan menampilkan lebih banyak teks. Tindakan perluasan akan dianimasikan, menyembunyikan teks More dan menampilkan item lainnya dalam satu gerakan yang halus. Anda dapat menyesuaikan jumlah baris teks yang ditampilkan dalam status diciutkan. Jumlah baris yang direkomendasikan adalah delapan.
Target ketuk terdiri dari seluruh area teks, bukan hanya tombol.
Gaya chip
Memperluas daftar
Ukuran ikon: 20dp x 20dp
Warna ikon: Di Permukaan
Tinggi: 32dp
Lebar: Bervariasi berdasarkan teks dan bahasa
Goresan: 1dp
Gaya label: Teks 1
Warna label: Di Platform
Memperluas teks
Ukuran ikon: 20dp x 20dp
Warna ikon: Di Permukaan
Tinggi: 32dp
Lebar: Bervariasi berdasarkan teks & bahasa
Goresan: 0 atau 1dp
Isi: Tidak ada
Gaya label: Teks 1
Warna label: Di Platform
Padding
Untuk varian daftar dan varian teks komponen item yang dapat diperluas, chip harus memiliki nilai padding berikut:
- Padding atas: 8dp
- Padding bawah: 16dp
Penggunaan
Contoh penggunaan item yang dapat diperluas:
