'/%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
StructuredList
Filas de datos en columnas, más livianas que una tabla: comparaciones de planes, resúmenes de ajustes, especificaciones. Con selectionMode="single" cada fila es una opción. En teléfonos cada fila apila sus celdas con sus etiquetas.
import { StructuredList } from '@alea/ui';
Ejemplos
StructuredList
Filas de datos en columnas, más livianas que una tabla. Con selectionMode="single" cada fila es una opción. En teléfonos cada fila apila sus celdas con sus etiquetas.
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-on…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-focus…--alea-surface-hover…--alea-text-muted…
Space
--alea-space-4…
Radius
--alea-radius-sm…
Type
--alea-font-size-md…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
StructuredList props
Filas de datos en columnas, más livianas que una tabla: comparaciones de planes, resúmenes de ajustes. Con selectionMode="single", cada fila es una opción. En teléfonos cada fila apila sus celdas.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-labelobligatoria | string | - | Nombre para lectores de pantalla. |
columnsobligatoria | { key: keyof T & string; label: ReactNode; align?: "start" | "end" | undefined; width?: string | undefined; }[] | - | Las columnas: key en cada fila, encabezado y alineación. |
rowsobligatoria | T[] | - | Las filas. |
className | string | - | Clases extra. |
defaultValue | string | - | La fila elegida al inicio. |
onChange | ((id: string) => void) | - | Se llama con el id de la fila elegida. |
selectionMode | "single" | "none" | 'none' | single: cada fila es una opción (un radio), para planes y opciones comparadas lado a lado. Por defecto none. |
showHeader | boolean | true | Muestra los encabezados de columna. Por defecto true. |
value | string | - | El id de la fila elegida (controlado). |
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
selectionModesinglenone- Estados
- HoverSelectedKeyboard focus
- 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-slist-row.alea-slist-head.alea-slist-cell.alea-slist.alea-slist-option.alea-slist-check- Atributos data
data-align=enddata-label
Accesibilidad
- Solo lectura, es una tabla con encabezados de columna y de fila.
- Con selección, es un grupo de radio: las flechas se mueven entre filas y se anuncia la elegida.
Teclado
| Tecla | Acción |
|---|---|
| Flecha arriba / Abajo | Se mueven entre opciones (selección) |
| Espacio | Elige la fila |
Qué hacer y qué evitar
Hacer
- Usa pocas columnas; para ordenar y muchas filas usa Table o DataGrid.
Evitar
- No pongas botones en filas que se eligen.