Como ele é
Parece um maço de fotos sobre a mesa. O cartão da frente mostra a imagem inteira, com um degradê escuro embaixo, o número e a legenda; os de trás aparecem um pouco mais abaixo, menores, levemente tortos para um lado e para o outro e mais escuros. Ao arrastar o cartão de cima, ele gira na direção do gesto. Se você solta depois de certa distância ou com um movimento rápido, ele voa para fora e reaparece no fundo da pilha, assentando com um leve balanço; se solta antes, ele volta ao centro. Embaixo ficam dois botões redondos e um contador.
Você pode estar procurando isto se pediu algo assim
- cards que eu arrasto para o lado igual aplicativo de namoro
- pilha de fotos que dá para jogar para o lado com o dedo
- mostrar depoimentos um por vez, passando como cartas de baralho
- galeria de cases em formato de cartas empilhadas no celular
- cartões com efeito de mola quando solto depois de arrastar
- deslizar cartões para a esquerda e a direita no onboarding do app
- aquele swipe de cartas estilo Tinder para o meu site
Também chamado de
- pilha de cartões
- swipe cards
- swipeable cards
- cartas deslizáveis
- deck de cartões
- stacked cards
- cartões arrastáveis com mola
Quando usar
- Depoimentos ou cases mostrados um de cada vez numa página de vendas
- Onboarding de app no celular, com uma ideia por cartão
- Vitrine de planos, produtos ou portfólio numa seção compacta
- Áreas pensadas para o dedo, em que arrastar é mais natural que clicar
Quando evitar
- Conteúdo que a pessoa precisa comparar lado a lado, como tabelas de preço
- Listas longas: depois de muitos cartões, quase ninguém chega ao fim da pilha
Como pedir para a sua IA
Crie uma pilha de cartões arrastáveis no estilo swipe para os depoimentos da página inicial: o cartão de cima inclina ao arrastar, é arremessado pela velocidade e volta ao fundo com mola, com navegação pelas setas do teclado, anúncio para leitor de tela e troca sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Truco
Truco funciona no celular?
Sim. Truco trata mouse e dedo com os mesmos eventos de ponteiro, e o cartão desativa a rolagem do navegador durante o gesto, então dá para arrastar e arremessar com o dedo sem a página rolar junto. Em telas pequenas, ajuste a largura e a altura pelas props; o padrão é 300 por 380 pixels.
Dá para usar Truco só com o teclado e com leitor de tela?
Sim. A pilha de Truco recebe foco e passa os cartões com as setas para a esquerda e para a direita, e os dois botões abaixo fazem o mesmo. A cada troca, uma região invisível anuncia ao leitor de tela qual cartão está na frente, com número e legenda.
Como Truco se comporta com movimento reduzido?
Quando a pessoa ativa a preferência de movimento reduzido, Truco desliga as molas: o cartão passado vai direto para o fundo da pilha e os outros assumem suas posições sem balanço. Arrastar, botões e teclado continuam funcionando normalmente.
