ปัดเพื่อดู
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
อนุญาตให้ผู้ใช้ปัดคอมโพเนนต์เพื่อแสดงการดำเนินการเพิ่มเติม
คอมโพเนนต์ปัดเพื่อแสดงช่วยให้คุณเพิ่มการดำเนินการเพิ่มเติมลงในชิปและการ์ดได้ โดยเฉพาะเมื่อปรากฏในรายการ คอมโพเนนต์นี้ช่วยให้ผู้ใช้ทําสิ่งต่างๆ ได้อย่างรวดเร็วโดยไม่ต้องออกจากหน้าจอ
ผู้ใช้สามารถปัดชิปและการ์ดไปทางซ้ายบางส่วนเพื่อเข้าถึงการดำเนินการเหล่านี้ จากนั้นแตะการดำเนินการเพื่อดำเนินการให้เสร็จสมบูรณ์ นอกจากนี้ ผู้ใช้ยังปัดชิปและการ์ดไปทางซ้ายจนสุดเพื่อดำเนินการหลักได้อย่างรวดเร็ว
คอมโพเนนต์นี้มี 2 ช่องสําหรับการดําเนินการเหล่านี้
- หลัก
- รอง (ไม่บังคับ)
กายวิภาคศาสตร์
การดำเนินการที่เปิดเผย
นักพัฒนาแอปสามารถปรับแต่งการดำเนินการสำหรับกรณีการใช้งานที่ไม่ซ้ำกันได้ พิจารณาสีและสัญลักษณ์ที่ใช้ในการดำเนินการเหล่านี้เพื่อช่วยให้ผู้ใช้ได้เข้าใจความหมาย
การดําเนินการที่แสดงจะปรากฏขึ้นที่ด้านเดียวกันสําหรับภาษาทั้งหมด
- การดําเนินการหลัก
- การดําเนินการรอง (ไม่บังคับ)
มุ่งมั่นทําการกระทําหลัก
หากต้องการดำเนินการหลัก ผู้ใช้สามารถแตะปุ่มหรือปัดไปทางซ้ายต่อ วิธีนี้จะทำให้ปุ่มขยายเต็มความกว้างของหน้าจอและแสดงป้ายกำกับ การดำเนินการจะหายไปหลังจากเลือก
ตัวอย่างแรกแสดงตัวเลือกปุ่มเดียว ตัวอย่างที่ 2 แสดงตัวเลือกปุ่มคู่
ยกเลิกการดำเนินการ
สําหรับการดําเนินการที่ทําให้ข้อมูลเสียหาย ให้เพิ่มคอมโพเนนต์การเลิกทําเพื่อให้ผู้ใช้ยกเลิกการดําเนินการเหล่านี้ได้ เพิ่มความสามารถในการเลิกทำลงในการดำเนินการหลัก
หากเพิ่มแล้ว ปุ่มชิปเลิกทำจะปรากฏแทนการดำเนินการที่ดำเนินการแล้ว
หลังจากผ่านไประยะหนึ่ง การดำเนินการเลิกทำจะหายไป และระบบจะดำเนินการที่ดำเนินการเสร็จสมบูรณ์
เกณฑ์การปัด
ลักษณะการทํางานของคอมโพเนนต์การปัดเพื่อแสดงจะขึ้นอยู่กับระยะการปัดของผู้ใช้บนหน้าจอ
- หากผู้ใช้ปัดผ่านหน้าจอน้อยกว่า 50% คอมโพเนนต์จะกลับไปที่ตำแหน่งเริ่มต้นและไม่มีการดำเนินการใดๆ
- หากผู้ใช้ปัดหน้าจอระหว่าง 50% ถึง 75% ของความกว้างเต็ม องค์ประกอบจะยังคงมองเห็นได้บางส่วน และการดำเนินการที่เชื่อมโยงกับองค์ประกอบจะปรากฏขึ้น
- หากผู้ใช้ปัดผ่านหน้าจอมากกว่า 75% คอมโพเนนต์จะหายไปและระบบจะดำเนินการหลักโดยอัตโนมัติ
คอมโพเนนต์ธีมวัสดุต่อไปนี้ใช้การปัดเพื่อแสดงลักษณะการทำงาน
บนการ์ด
ภาพหน้าจอต่อไปนี้แสดงการปัดเพื่อดูลักษณะที่ปรากฏของคอมโพเนนต์เมื่อใช้คลาส SwipeToRevealCard
บนชิป
ภาพหน้าจอต่อไปนี้แสดงการปัดเพื่อดูลักษณะที่ปรากฏของคอมโพเนนต์เมื่อใช้คลาส SwipeToRevealChip
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-27 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 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:"]]
