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 2023-12-02 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]
{"lastModified": "\u00daltima atualiza\u00e7\u00e3o 2023-12-02 UTC."}
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2023-12-02 UTC."]]