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