Primitivedata-display

Deck

Stable

Pilha de cartas descartadas uma a uma, no estilo Tinder: arraste a carta do topo para a esquerda ou para a direita, ou foque nela e use as setas. Preserva a API do Kibo — índice controlado ou não, limiar do arraste, tamanho e escala da pilha, animação na troca externa de índice. A normalização acrescentou o que o upstream deixava só para o ponteiro: teclado, foco que segue para a próxima carta, só a carta do topo na árvore de acessibilidade e a política de reduced motion.

Instalação

npx up-web-ds add deck

Preview

Basic

Lisboa

Nenhum destino restante

Controlled

Lisboa

Portugal · 4 noites

No more cards

1 de 5

Stack

Lisboa

No more cards

All states

Basic

Lisboa

Nenhum destino restante

Controlled

Lisboa

Portugal · 4 noites

No more cards

1 de 5

Stack

Lisboa

No more cards

Usage

@/components/ui/deck

import {
  Deck,
  DeckCards,
  DeckEmpty,
  DeckItem,
} from '@/components/ui/deck'

Deck

1
2
3
4
5
6
7
8
9<Deck className="h-64 w-full max-w-72">
  <DeckCards>
    <DeckItem className="font-semibold text-2xl">Lisboa</DeckItem>
    <DeckItem className="font-semibold text-2xl">Cusco</DeckItem>
    <DeckItem className="font-semibold text-2xl">Quioto</DeckItem>
    <DeckItem className="font-semibold text-2xl">Marrakech</DeckItem>
  </DeckCards>
  <DeckEmpty>Nenhum destino restante</DeckEmpty>
</Deck>

Props

Deck

Estende HTMLAttributes<HTMLDivElement>. Aceita também os atributos padrão de um elemento React (278 não listados).

DeckCards

Props de DeckCards
Prop	Type	Default	Description
animateOnIndexChange	`boolean`	`true`	Animate the top card out when `currentIndex` changes from outside.
currentIndex	`number`	sem valor padrão	Index of the top card, when controlled.
defaultCurrentIndex	`number`	`0`	Index of the top card on the first render, when uncontrolled.
indexChangeDirection	`SwipeDirection`	`'left'`	Which way the top card leaves when `currentIndex` changes from outside.
onCurrentIndexChange	`((index: number) => void)`	sem valor padrão
onSwipe	`((index: number, direction: SwipeDirection) => void)`	sem valor padrão	Called once per swipe, with the index of the card that left.
onSwipeEnd	`((index: number, direction: SwipeDirection) => void)`	sem valor padrão	Called once per swipe, right after `onSwipe`.
perspective	`number`	`1000`	CSS perspective of the stack, in px.
scale	`number`	`0.05`	How much smaller each card behind is than the one in front of it.
stackSize	`number`	`3`	How many cards are drawn, the top one included.
threshold	`number`	`150`	How far, in px, a drag has to travel for the card to leave.

Estende HTMLAttributes<HTMLDivElement>. Aceita também os atributos padrão de um elemento React (278 não listados).

DeckItem

Estende HTMLAttributes<HTMLDivElement>. Aceita também os atributos padrão de um elemento React (278 não listados).

DeckEmpty

Estende HTMLAttributes<HTMLDivElement>. Aceita também os atributos padrão de um elemento React (278 não listados).

Composition

As cartas são filhos do DeckCards, na ordem em que saem. O DeckEmpty vem depois do DeckCards, dentro do Deck: a pilha o cobre, e ele aparece quando a última carta sai.

Composição de Deck

Deck

DeckCards
- DeckItem
DeckEmpty

Metadata

Notas de acessibilidade

Verificado em tests/e2e/deck.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: a carta do topo é uma parada de Tab com anel de foco visível, ArrowLeft/ArrowRight a descartam como um arraste além do limiar (mesmos onSwipe, onSwipeEnd e mudança de índice), e o foco passa para a carta seguinte em vez de cair no body; um segundo descarte durante a saída é ignorado. Quando o índice muda por fora (botões do exemplo controlado), o foco fica onde a pessoa o deixou. Leitor de tela: só a carta do topo está na árvore — as de trás são aria-hidden e inert —, verificado por teste e pelo snapshot da árvore de acessibilidade do navegador; a carta anuncia os atalhos em aria-keyshortcuts. Toque verificado em 375px com emulação de toque real (CDP): o arraste com o dedo descarta a carta, os botões do exemplo atingem 24x24 e não há rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce, via useReducedMotion() porque o movimento é calculado em JavaScript — a carta sai apagando no lugar, sem voo, sem inclinação e sem ampliar no arraste, e a pilha assenta sem tween; o arraste continua seguindo o dedo (manipulação direta). Sem ícones estruturais.

Classificação

Layer: Primitive
Domínio: Domain-free (compartilhado)
Categoria: data-display
Status: Stable

Origem e distribuição

Fonte: kibo registry / deck
Licença: MIT
URL: https://www.kibo-ui.com/r/deck.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: motion
Ícones: Nenhum
Construído sobre: Nenhum
Usado por: Nenhum ainda