'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Countdown y FormattedNumber
El tiempo que falta hasta un momento, y números con el formato de quien lee: moneda, porcentaje, compacto.
import { Countdown, FormattedNumber } from '@alea/ui';
Ejemplos
Cuenta regresiva y números
La cuenta regresiva se actualiza cada segundo; los lectores de pantalla la escuchan una vez por minuto.
Revenue
$126,560
1.8M visits · 4.3% conversion
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-text-muted…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-weight-medium…
Props
Countdown props
El tiempo que falta hasta un momento, actualizado cada segundo. Los lectores de pantalla lo escuchan una vez por minuto, no cada segundo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | ReactNode | - | Hasta qué cuenta, leído antes del tiempo ("La oferta termina en"). |
toobligatoria | number | Date | - | Cuándo termina: un Date o una marca de tiempo en ms. |
className | string | - | |
onEnd | (() => void) | - | Se llama una vez al llegar a cero. |
showDays | boolean | - | Muestra días. Por defecto true cuando falta más de un día. |
FormattedNumber props
Un número con el formato del idioma y región de quien lee: moneda, porcentaje, compacto.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
valueobligatoria | number | - | |
format | NumberFormatOptions | - | Opciones de Intl.NumberFormat: { style: 'currency', currency: 'USD' }, { notation: 'compact' }, { style: 'percent' }. |
locale | string | - | Un locale BCP 47. Por defecto el del navegador. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-stat.alea-countdown.alea-stat-label.alea-stat-value.alea-countdown-value
Accesibilidad
- La cuenta regresiva avanza visualmente cada segundo, pero los lectores de pantalla la escuchan una vez por minuto (una región live polite), no sesenta veces.
Qué hacer y qué evitar
Hacer
- Di hasta qué cuenta en label.
- Usa FormattedNumber en vez de formatear a mano: sigue el idioma y región de quien lee.
Evitar
- No uses una cuenta regresiva para presionar a comprar.