Number Ticker
StableUm número que conta até o próprio valor na primeira vez em que entra na tela — ou regressivamente, com `direction="down"`. A contagem é ornamento e o número é o conteúdo: o leitor de tela recebe o número de destino desde o primeiro render, nunca um quadro da contagem, e sob movimento reduzido o número aparece de uma vez. `locale` define o agrupamento e o separador decimal; combine-o com o idioma da página.
Instalação
npx up-web-ds add number-tickerPreview
Basic
Decimal Places
5.25
Count Down
0
Start Value
10.000
Locale
- pt-BR
- 1.234.567,89
- en-US
- 1,234,567.89
In Sentence
Os componentes nativos falam 3 durações de motion: fast, default e slow.
Figures
- types na taxonomia
- 6
- domínios de produto
- 5
- providers de ícones
- 4
- durações na escala de motion
- 3
All states
Basic
100Decimal Places
5.25
Count Down
0
Start Value
10.000
Locale
- pt-BR
- 1.234.567,89
- en-US
- 1,234,567.89
In Sentence
Os componentes nativos falam 3 durações de motion: fast, default e slow.
Figures
- types na taxonomia
- 6
- domínios de produto
- 5
- providers de ícones
- 4
- durações na escala de motion
- 3
Usage
Props
Estende ComponentPropsWithoutRef<'span'>. Aceita também os atributos padrão de um elemento React (279 não listados).
prop obrigatória.
Metadata
Notas de acessibilidade
Verificado em number-ticker.test.tsx e em tests/e2e/number-ticker.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o componente é texto, não é interativo e não entra na sequência de Tab; verificado em navegador que nenhum Tab pousa dentro dele. Leitor de tela verificado por teste e pela árvore de acessibilidade do navegador: os dígitos que contam são aria-hidden, e uma cópia sr-only carrega o número de destino desde o primeiro render — o upstream reescrevia o texto a cada quadro do spring, e um leitor que chegasse no meio da contagem lia o quadro da vez. Não é região live de propósito: uma contagem anunciada sessenta vezes por segundo é ruído, e um valor que muda depois é lido na próxima vez que alguém chegar nele. `locale` existe porque o leitor lê o número como ele está escrito: "1,000" numa página em português é um vírgula zero zero zero. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a contagem é decorativa: via useReducedMotion o número de destino aparece de uma vez, sem contagem, sem `delay` e sem esperar entrar na tela, e nenhum quadro intermediário é pintado. Touch verificado em viewport de 320px com emulação de toque: nenhum exemplo provoca rolagem horizontal, e a linha de números passa de quatro para duas colunas.
Classificação
- Layer
- Component
- Domínio
- Application
- Categoria
- data-display
- Status
- Stable
Origem e distribuição
- Fonte
- magic registry / number-ticker
- Licença
- MIT
- 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