Desliza para mostrar
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Permite que los usuarios deslicen un componente para revelar acciones adicionales.
El componente deslizar para revelar te permite agregar acciones adicionales a los chips y las tarjetas, en especial cuando aparecen en listas. Este componente permite que los usuarios realicen tareas con rapidez sin salir de la pantalla.
Los usuarios pueden deslizar chips y tarjetas parcialmente hacia la izquierda para acceder a estas acciones y, luego, presionar una acción para completarla. Los usuarios también pueden deslizar por completo las tarjetas y los chips hacia la izquierda para aceptar rápidamente la acción principal.
El componente tiene 2 ranuras para estas acciones:
- Principal
- Secundario (opcional)
Anatomía
Acciones reveladas
Los desarrolladores pueden personalizar las acciones para sus casos de uso únicos. Ten en cuenta el color y la iconografía usados en estas acciones para ayudar a los usuarios a comprender lo que significan.
Las acciones reveladas aparecen en el mismo lado para todas las configuraciones regionales de idioma.
- Acción principal
- Acción secundaria (opcional)
Confirma una acción principal
Para confirmar la acción principal, el usuario puede presionar el botón o continuar deslizando el dedo hacia la izquierda. De esta manera, el botón se extiende a todo el ancho de la pantalla y muestra una etiqueta. La acción se atenúa después de
ser seleccionada.
En el primer ejemplo, se muestra una opción de botón único. En el segundo ejemplo, se muestra una opción de botón doble.
Deshacer acción
En el caso de las acciones destructivas, agrega un componente de deshacer para permitir que los usuarios reviertan estas acciones. Agrega la función de deshacer a la acción principal.
Si se agrega, aparecerá un botón para deshacer la acción confirmada en lugar de la acción confirmada.
Después de un período breve, la acción de deshacer se atenúa y el sistema completa la acción confirmada.
Umbrales de deslizamiento
El deslizamiento para revelar el comportamiento del componente depende de qué tan lejos el usuario desliza el dedo en la pantalla:
- Si el usuario desliza menos del 50% de la pantalla, el componente vuelve a su posición inicial y no se realiza ninguna acción.
- Si el usuario desliza el dedo por la pantalla entre el 50% y el 75% del ancho completo, el componente permanece parcialmente visible y aparecen las acciones asociadas con el componente.
- Si el usuario desliza más del 75% de la pantalla, el componente desaparece y el sistema realiza automáticamente la acción principal.
Los siguientes componentes de temática de Material implementan el deslizamiento para revelar el comportamiento:
En tarjetas
En las siguientes capturas de pantalla, se muestra el deslizamiento para revelar la apariencia del componente cuando se usa la clase SwipeToRevealCard:
En chips
En las siguientes capturas de pantalla, se muestra el deslizamiento para revelar la apariencia del componente cuando se usa la clase SwipeToRevealChip:
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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:"]]
