Geser untuk membuka
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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:
- Utama
- 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.
- Tindakan utama
- 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:
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-07-27 UTC."],[],[],null,["# Swipe to reveal\n\nAllow users to swipe a component to reveal extra actions.\n\nThe *swipe to reveal* component lets you add extra actions to\nchips and cards, specifically when they appear in lists. This component lets\nusers quickly get things done without leaving the screen.\n\nUsers can partially swipe chips and cards to the left to access these\nactions, then tap on an action to complete it. Users can also fully swipe\nchips and cards to the left to quickly commit to the primary action. \nThe component has 2 slots for these actions:\n\n1. **Primary**\n2. **Secondary (optional)**\n\nAnatomy\n-------\n\n### Revealed actions\n\nDevelopers can customize the actions for their unique use cases. Consider\nthe color and iconography used in these actions to help users understand\nwhat they mean.\n\nThe revealed actions appear on the same side for all language\nlocales.\n\n1. **Primary action**\n2. **Secondary action (optional)** \n\n### Commit to a primary action\n\nTo commit to the primary action, a user can either tap on the button or\ncontinue swiping to the left. In this way, the button extends to the entire\nwidth of the screen and displays a label. The action fades away after being\nselected.\n\nThe first example shows a **single button option** . The\nsecond example shows a **double button option**. \n\n### Undo action\n\nFor destructive actions, add an undo component to let users reverse these\nactions. Add the undo capability to the primary action.\n\nIf added, an undo chip button appears in place of the committed action.\nAfter a short period of time, the undo action fades away, and the system\ncompletes the committed action. \n\n### Swipe thresholds\n\nThe swipe to reveal component's behavior depends upon how far the user\nswipes across the screen:\n\n- If the user swipes across less than 50% of the screen, the component snaps back to its starting position, and no action is taken.\n- If the user swipes across the screen between 50% and 75% of the full width, the component remains partially visible, and the actions associated with the component appear.\n- If the user swipes across more than 75% of the screen, the component disappears, and the system automatically performs the primary action.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRelated components\n------------------\n\nThe following material-themed components implement the swipe to reveal behavior:\n\n- [`SwipeToRevealCard`](/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealCard(androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.foundation.RevealState,androidx.compose.ui.Modifier,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0))\n- [`SwipeToRevealChip`](/reference/kotlin/androidx/wear/compose/material/package-summary#SwipeToRevealChip(androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.foundation.RevealState,androidx.compose.ui.Modifier,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealAction,androidx.wear.compose.material.SwipeToRevealActionColors,androidx.compose.ui.graphics.Shape,kotlin.Function0))\n\n### On cards\n\nThe following screenshots show the swipe to reveal component's appearance when\nusing the `SwipeToRevealCard` class:\n\n### On chips\n\nThe following screenshots show the swipe to reveal component's appearance when\nusing the `SwipeToRevealChip` class:"]]
