Geser untuk membuka

Memungkinkan pengguna menggeser komponen untuk menampilkan tindakan tambahan.

Komponen geser untuk menampilkan memungkinkan Anda menambahkan tindakan tambahan ke chip dan kartu, terutama saat keduanya muncul dalam daftar. Komponen ini memungkinkan pengguna menyelesaikan berbagai hal dengan cepat tanpa meninggalkan layar.

Pengguna dapat menggeser sebagian chip dan kartu ke kiri untuk mengakses tindakan ini, lalu mengetuk tindakan untuk menyelesaikannya. Pengguna juga dapat sepenuhnya menggeser chip dan kartu ke kiri untuk langsung berkomitmen pada tindakan utama.

Komponen ini memiliki 2 slot untuk tindakan ini:

  1. Utama
  2. Sekunder (opsional)

Anatomi

Tindakan yang terbuka

Developer dapat menyesuaikan tindakan untuk kasus penggunaan unik mereka. Pertimbangkan warna dan ikonografi yang digunakan dalam tindakan ini untuk membantu pengguna memahami apa artinya.

Tindakan yang diungkapkan akan muncul di sisi yang sama untuk semua lokalitas bahasa.

  1. Tindakan utama
  2. Tindakan sekunder (opsional)

Berkomitmen untuk tindakan utama

Untuk berkomitmen pada tindakan utama, pengguna dapat mengetuk tombol atau melanjutkan menggeser ke kiri. Dengan cara ini, tombol diperluas ke seluruh lebar layar dan menampilkan label. Tindakan akan memudar setelah dipilih.

Contoh pertama menampilkan opsi satu tombol. Contoh kedua menunjukkan opsi tombol ganda.

Urungkan tindakan

Untuk tindakan destruktif, tambahkan komponen urungkan untuk memungkinkan pengguna membalikkan tindakan ini. Menambahkan kemampuan urungkan ke tindakan utama.

Jika ditambahkan, tombol urungkan chip akan muncul sebagai pengganti tindakan yang dilakukan. Setelah beberapa saat, tindakan urungkan akan menghilang, dan sistem akan menyelesaikan tindakan yang dilakukan.

Ambang batas geser

Tindakan geser untuk menampilkan perilaku komponen bergantung pada seberapa jauh pengguna menggeser melintasi layar:

  • Jika pengguna menggeser kurang dari 50% dari layar, komponen akan kembali ke posisi awal, dan tidak ada tindakan yang diambil.
  • Jika pengguna menggeser pada layar antara 50% dan 75% dari lebar penuh, komponen akan tetap terlihat sebagian, dan tindakan yang terkait dengan komponen akan muncul.
  • Jika pengguna menggeser lebih dari 75% layar, komponen akan hilang, dan sistem akan otomatis melakukan tindakan utama.

Komponen bertema material berikut menerapkan tindakan geser untuk menampilkan perilaku:

Di kartu

Screenshot berikut menunjukkan tindakan geser untuk menampilkan tampilan komponen saat menggunakan class SwipeToRevealCard:

Di chip

Screenshot berikut menunjukkan tindakan geser untuk menampilkan tampilan komponen saat menggunakan class SwipeToRevealChip: