'/%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
ContainedList
Una lista con título en su propio contenedor, con una acción: miembros, archivos recientes, integraciones. Las filas llevan un ícono o avatar, una descripción y acciones; tres tamaños de fila; una tarjeta o una versión plana para paneles.
import { ContainedList, ContainedListItem } from '@alea/ui';
Ejemplos
ContainedList
Una lista con título en su propia tarjeta, con una acción y filas que llevan un ícono o avatar, una descripción y acciones. disclosed es la versión plana para paneles y popovers.
Members
- Ana Rivasana@alea.devOwner
- Bruno Díazbruno@alea.dev
- Carla MendesInvitedPending
Integrations
- FigmaConnected
- Code repositoryConnected
- Team chat
- Docs
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Kind
kind - Size
size
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-border…--alea-surface…
Space
--alea-space-2…
Radius
--alea-radius-lg…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-weight-semibold…
Shadow
--alea-shadow-card…
Props
ContainedList props
Una lista con título en su propio contenedor, con una acción: archivos recientes, miembros, integraciones. Las filas llevan texto, un ícono o avatar al inicio y acciones al final.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Elementos ContainedListItem. |
labelobligatoria | ReactNode | - | El título de la lista. |
action | ReactNode | - | Una acción junto al título: Agregar, Ver todo. |
className | string | - | Clases extra. |
headingLevel | 2 | 3 | 4 | 3 | Nivel de título del título. Por defecto 3. |
kind | "on-page" | "disclosed" | 'on-page' | on-page (una tarjeta, por defecto) o disclosed (plana, para listas dentro de popovers y paneles). |
size | "sm" | "md" | "lg" | 'md' | sm (filas de 40 px), md (48 px, por defecto) o lg (64 px). |
ContainedListItem props
Una fila de un ContainedList.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
description | ReactNode | - | Una segunda línea. |
end | ReactNode | - | Meta o acciones al final. |
href | string | - | Hace que toda la fila sea un enlace. |
start | ReactNode | - | Un ícono o avatar al inicio. |
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.
ContainedList
- Variantes
kindon-pagedisclosedsizesmmdlg- 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-clist.alea-clist-head.alea-clist-title.alea-clist-action.alea-clist-items- Atributos data
data-size=smdata-size=lgdata-kind=on-page
ContainedListItem
- Estados
- Hover (CSS)
- 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-clist-start.alea-clist-text.alea-clist-name.alea-clist-desc.alea-clist-item.alea-clist-link.alea-clist-end
Accesibilidad
- El título es un encabezado y las filas son una lista; las filas con enlace son enlaces reales.
- Las acciones al final conservan su propio nombre (nombra en ellas a la persona o el elemento).
Teclado
| Tecla | Acción |
|---|---|
| Tab | Recorre los enlaces y las acciones |
Qué hacer y qué evitar
Hacer
- Úsalo para listas cortas con un título claro.
Evitar
- No hagas una fila un enlace y además pongas enlaces dentro.