'/%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
ListView
Una lista de elementos con detalle para elegir, abrir o usar.
import { ListView, ListItem } from '@alea/ui';
Ejemplos
ListView
Elementos ricos con inicio, descripción y final.
Separados, con acciones
Elementos como tarjetas; onAction abre uno.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Layout
layout - Variant
variant - Orientation
orientation
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
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-accent…--alea-accent-subtle…--alea-border…--alea-focus…--alea-surface…
Space
--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…--alea-radius-sm…
Shadow
--alea-shadow-card…
Component
--alea-list-min…
Props
ListView props
Una lista de elementos ricos que se pueden seleccionar, abrir o usar, con navegación por teclado. Las filas se pueden arrastrar para reordenar, o entre listas; las tarjetas pueden ir en una grilla.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
dragGroup | string | - | Las listas con el mismo dragGroup aceptan filas de la otra. Los items deben ser datos simples (viajan como JSON). |
layout | "grid" | "stack" | 'stack' | stack (filas, por defecto) o grid (tarjetas en columnas, las flechas se mueven en dos direcciones). Define el ancho de columna con --alea-list-min. |
onItemsChange | ((items: T[]) => void) | - | Con items: las filas se pueden arrastrar para reordenar (y mover entre listas con el mismo dragGroup). Se llama con el nuevo array. |
variant | "separated" | "joined" | "plain" | 'joined' | Líneas entre elementos (joined), tarjetas separadas, o nada (plain). |
ListItem props
Un elemento de un ListView.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Una segunda línea. |
end | ReactNode | - | Acciones o meta a la derecha (los botones siguen accesibles con Tab y flechas). |
start | ReactNode | - | Un avatar, ícono o imagen a la izquierda. |
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.
ListView
- Variantes
layoutgridstackvariantseparatedjoinedplain- Estados
- Keyboard focusDrop target
- 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-list- Atributos data
data-variant=joineddata-variant=separateddata-variant=plaindata-layout=griddata-empty
ListItem
- Estados
- Keyboard focusHoverSelectedDisabledDraggingDrop target
- Motion
- morphtintmore
- 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-list-item.alea-check.alea-table-check.alea-check-box.alea-list-start.alea-list-text.alea-list-title.alea-list-desc.alea-list-end- Atributos data
data-variant=joineddata-variant=separateddata-hrefdata-actiondata-variant=plaindata-layout=grid
Accesibilidad
- Una lista en grilla: las flechas se mueven entre elementos y entran a sus botones.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Se mueven entre elementos |
| Espacio | Elige |
| Enter | Abre (onAction) |
Qué hacer y qué evitar
Hacer
- Usa separated para tarjetas y joined para listas densas.
- Dale un aria-label a la lista.
Evitar
- No anides controles interactivos a más de un nivel dentro de un elemento.
- No uses ListView para datos tabulares: usa Table.