Deslize para revelar
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Permitir que os usuários deslizem um componente para revelar ações extras.
O componente deslizar para revelar permite adicionar mais ações a
ícones e cards, especificamente quando eles aparecem em listas. Esse componente permite
que os usuários realizem tarefas rapidamente sem sair da tela.
Os usuários podem deslizar parcialmente ícones e cards para a esquerda para acessar essas
ações e tocar em uma ação para concluí-la. Os usuários também podem deslizar
ícones e cards para a esquerda de forma rápida para realizar a ação principal.
O componente tem dois slots para estas ações:
- Principal
- Secundário (opcional)
Anatomia
Ações reveladas
Os desenvolvedores podem personalizar as ações para casos de uso únicos. Considere
a cor e a iconografia usadas nessas ações para ajudar os usuários a entender
o que eles querem dizer.
As ações reveladas aparecem do mesmo lado para todas as localidades
de idioma.
- Ação principal
- Ação secundária (opcional)
Confirmar com uma ação principal
Para confirmar a ação principal, o usuário pode tocar no botão ou
continuar deslizando para a esquerda. Dessa forma, o botão se estende por toda
a largura da tela e exibe um rótulo. A ação desaparece depois de ser
selecionada.
O primeiro exemplo mostra uma opção com um único botão. O
segundo exemplo mostra uma opção de botão duplo.
Desfazer ação
Para ações destrutivas, adicione um componente de desfazer para permitir que os usuários revertam essas
ações. Adicione o recurso de desfazer à ação principal.
Se adicionada, um botão de ícone de desfazer vai aparecer no lugar da ação confirmada.
Após um curto período, a ação de desfazer esmaece, e o sistema
conclui a ação confirmada.
Limites de deslize
O gesto de deslizar para revelar o comportamento do componente depende do quanto o usuário desliza na tela:
- Se o usuário deslizar menos de 50% da tela, o componente
vai voltar à posição inicial e nenhuma ação será realizada.
- Se o usuário deslizar a tela entre 50% e 75% da largura total, o componente permanecerá parcialmente visível, e as ações associadas a ele serão exibidas.
- Se o usuário deslizar mais de 75% da tela, o componente
desaparecerá, e o sistema realizará automaticamente a ação principal.
Os seguintes componentes com tema de material implementam o gesto de deslizar para revelar o comportamento:
Nos cards
As capturas de tela abaixo mostram o gesto de deslizar para revelar a aparência do componente ao
usar a classe SwipeToRevealCard:
Em chips
As capturas de tela abaixo mostram o gesto de deslizar para revelar a aparência do componente ao
usar a classe SwipeToRevealChip:
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-07-27 UTC.
[null,null,["Última atualização 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:"]]
