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.
Componentes relacionados
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:
