'/%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}
Flujo de trabajoAlea Pro
LogView
Líneas de log en un scroller rápido: hora, nivel como badge de color, origen y mensaje en una línea. Miles de líneas se renderizan con fluidez.
import { LogView } from '@alea/pro';
Ejemplos
Miles de líneas
Solo se renderizan las filas en pantalla. Las flechas recorren las líneas.
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…
Space
--alea-space-3…
Type
--alea-font-family-mono…
Props
LogView props
Líneas de log en un scroller rápido: hora, nivel como badge de color, origen y mensaje en una línea; las flechas las recorren.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Nombre de la lista. |
linesobligatoria | LogLine[] | - | Las líneas, de la más nueva a la más vieja o al revés, como quieras mostrarlas. Miles está bien: solo se renderizan las filas visibles. |
className | string | - | Clases extra para el elemento raíz. |
height | number | 480 | Alto del scroller en px. Por defecto 480. |
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-log.alea-log-line.alea-log-source.alea-log-message
Accesibilidad
- Un listbox con el conteo completo; cada línea se lee como hora, nivel, origen y mensaje.
- El nivel es una palabra además de un color.
Teclado
| Tecla | Acción |
|---|---|
| Tab | Entra en la lista |
| Arriba o Flecha abajo | Línea anterior o siguiente |
| Inicio o Fin | Primera o última línea |
Qué hacer y qué evitar
Hacer
- Combínalo con un FilterBar para nivel, origen y texto.
Evitar
- No ajustes los mensajes en varias líneas: abre la línea para ver el texto completo.
En Figma
Log line con Level (info, warn, error, debug).