Item yang dapat diperluas

Item yang dapat diperluas adalah chip kustom yang menampilkan konten tambahan inline.

Chip item yang dapat diperluas

Item yang dapat diperluas memungkinkan aplikasi menyertakan konten dengan kepadatan tinggi dalam ruang yang lebih kecil di layar. Gunakan komponen ini saat Anda ingin membuat aplikasi tetap ringkas sekaligus memungkinkan pengguna akses cepat ke konten tambahan. Gunakan komponen ini agar pengguna dapat melakukan tugas berikut:

  • Tampilkan item daftar lainnya (chip, kartu)
  • Tampilkan teks lainnya

Anatomi

Daftar yang diperluas
Chip harus disejajarkan 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 berupa chevron yang menghadap ke bawah, yang dapat disesuaikan atau dihapus. Ikon diratakan kanan untuk lokalitas bahasa LTR, dan diratakan kiri untuk lokalitas bahasa RTL.

Memperluas teks
Chip harus rata tengah.

A. Label
Teks label dapat disesuaikan. Defaultnya adalah "More".

B. Penampung
Tombol memiliki dua varian: bergaris batas dan tidak bergaris batas.

C. Ikon luaskan
Ikon default berupa chevron yang menghadap ke bawah, yang dapat disesuaikan atau dihapus. Ikon diratakan kanan untuk lokalitas bahasa LTR, dan diratakan 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 Tampilkan lebih banyak dan menampilkan item lainnya dalam satu gerakan yang halus. Anda dapat menyesuaikan jumlah item yang ditampilkan dalam status diciutkan. Jumlah item yang direkomendasikan adalah tiga.

Memperluas teks

Ketuk chip untuk meluaskan dan menampilkan lebih banyak teks. Tindakan perluasan akan dianimasikan, menyembunyikan teks Lainnya 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: 20 dp x 20 dp
Warna ikon: Di Platform
Tinggi: 32 dp
Lebar: Bervariasi berdasarkan teks dan bahasa
Goresan: 1 dp
Gaya label: Teks 1
Warna label: Di Platform

Memperluas teks

Ukuran ikon: 20 dp x 20 dp
Warna ikon: Di Permukaan
Tinggi: 32 dp
Lebar: Bervariasi berdasarkan teks & bahasa
Goresan: 0 atau 1 dp
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: 8 dp
  • Padding bawah: 16 dp

Penggunaan

Contoh penggunaan item yang dapat diperluas: