VirtualList

Una lista que solo muestra lo que está en pantalla, para miles de filas.

import { VirtualList } from '@alea/pro';

Ejemplos

Diez mil filas

Solo las filas visibles están en la página; el scroll y la búsqueda por tipeo siguen funcionando.

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-border…
--alea-surface…

Radius

--alea-radius-md…

Props

`VirtualList` props

Una lista que solo muestra lo que está en pantalla, para miles de filas.

Prop	Tipo	Por defecto	Descripción
`aria-label`obligatoria	`string`	-	Nombre para lectores de pantalla cuando no hay etiqueta visible.
`children`obligatoria	`(item: T) => ReactNode`	-	Muestra el texto de un elemento.
`items`obligatoria	`T[]`	-	Los elementos; cada uno necesita un id.
`textValue`obligatoria	`(item: T) => string`	-	Texto para la búsqueda por tipeo y los lectores de pantalla.
`height`	`number`	`360`	Altura visible en px. Por defecto 360.
`onAction`	`((key: Key) => void)`	-	Se llama con el id cuando se abre un elemento (Enter o clic).
`rowHeight`	`number`	`44`	Altura de fila en px. Por defecto 44.
`selectionMode`	`"single" \| "multiple" \| "none"`	`'none'`	none (por defecto), single o multiple.

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.

Variantes: selectionModesinglemultiplenone
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-virtual.alea-virtual-list

Un listbox que conserva la cantidad total (aria-setsize) aunque las filas no estén en la página.

Teclado

Tecla	Acción
`Flecha arriba` / `Abajo`	Se mueven entre elementos
`Inicio` / `Fin`	Primer o último elemento
`Escribir`	Salta a un elemento que coincida

Qué hacer y qué evitar

Hacer

Úsala desde unos cientos de elementos.
Mantén todas las filas a la misma altura (rowHeight).

Evitar

No la uses para listas cortas: un ListView normal es más simple.
No pongas contenido que se expande en las filas.