Skeleton
StablePlaceholder com a forma do conteúdo que ainda não chegou. Só vale desenhar quando essa forma é conhecida: uma caixa cinza genérica diz "espere", uma caixa do tamanho do parágrafo diz onde ele vai ficar e impede o layout de pular quando ele chega. É aria-hidden por padrão — quem anuncia o carregamento é a região, não seis retângulos vazios.
Instalação
npx up-web-ds add skeletonPreview
Default
Catalog Row
Card
Shapes
All states
Default
Catalog Row
Card
Shapes
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- feedback
- Status
- Stable
Origem e distribuição
- Fonte
- coss registry / skeleton
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Não é interativo: não entra na sequência de tabulação e não tem estado, então teclado e alvo de toque não têm superfície onde falhar. Leitor de tela verificado por teste: o placeholder é aria-hidden por padrão e a região carrega aria-busy, com a saída explícita de aria-hidden={false} para o caso raro em que o placeholder é mesmo a única mensagem de status. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a varredura é ambiente, não transicional, então ela roda em --motion-loop-duration e essa variável vai a 0s em vez de a 1ms: o placeholder para em vez de acelerar, que é exatamente a animação que a preferência existe para deter. Contraste verificado nos dois temas: o brilho é a superfície clareada pelo token do tema, não um branco fixo que só funciona em um deles.
Dependências
- Pacotes
- Nenhuma
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Shimmering Text