List
La suite List de Nuvex UI combina EList, EListItem y EListGroup para renderizar colecciones estructuradas con seleccion, enlaces de router, contenido enriquecido y grupos expandibles anidados. El contrato compartido de color, tamano, estados y teclado mantiene tanto listas simples como arboles completos de navegacion dentro del framework.
Uso
Configura un EList seleccionable y observa como sus items heredan las props del contenedor. El valor actual de v-model identifica la fila activa.
Valor seleccionado: inbox
Contenido del item
Construye cada fila con title, subtitle, iconos o avatares. El item mantiene alineadas las regiones inicial y final mientras el contenido central se trunca de forma segura.
Equipo de diseno8 colaboradores activos
Variantes visuales
Combina outlined, inset, dense, elevacion y la escala compartida de tamanos para adaptar la densidad y la superficie de la lista.
- DefaultEspaciado y superficie base
- Outlined e insetTamano large heredado
- DenseRitmo vertical compacto
Seleccion y estados
Un v-model escalar activa seleccion simple; un arreglo activa seleccion multiple. Los estados activo, deshabilitado y de foco permanecen sincronizados con el modelo y el teclado.
Seleccion simple
- Disponible
- Item deshabilitado
Seleccion multiple
- Bandeja de entrada
- Borradores
- Archivo
Grupos y anidacion
Compone ramas expandibles con EListGroup y propaga los attrs del activador. Los valores estables producen rutas jerarquicas controlables con v-model:group.
- List
- Tabs
- Configuracion
Slots y composicion
Usa los slots prepend y append para medios y acciones personalizados sin perder el layout ni la superficie interactiva del item.
Jordan LeeDisenador de producto
Accesibilidad y teclado
Las listas seleccionables exponen semantica listbox y foco administrado. Los items soportan flechas, Home, End, Enter y Space; los grupos tambien permiten navegar entre niveles horizontalmente.
- Bandeja de entrada12 mensajes sin leer
- Borradores3 elementos pendientes de revision
- ArchivoConversaciones completadas
Enfoca un item y usa Flecha arriba, Flecha abajo, Home, End, Enter o Space.
Referencia API
Consulta las props publicas de cada componente de la suite List. Los eventos y slots nombrados se resumen despues de las tablas.
Props de EList
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | ListModelProp | undefined |
Valor del item seleccionado. Un arreglo activa seleccion multiple. | ||
| group | ListModelProp | estado interno |
Estado controlado de grupos abiertos. Sin esta prop, la lista administra el estado internamente. | ||
| disabled | boolean | false |
Deshabilita la interaccion de la lista y todos sus items y grupos descendientes. | ||
| outlined / inset / dense | boolean | false |
Controla borde, espaciado interno, radio de los items y densidad compacta. | ||
| size | Size | undefined |
Tamano por defecto heredado por los items, salvo override local. | ||
| color / activeColor | string | undefined |
Define el color base del texto y el color del item activo. | ||
| elevation | Elevation | undefined |
Aplica una clase de elevacion del framework a la superficie. | ||
Props de EListItem
| Propiedad | Tipo | Por defecto |
|---|---|---|
| value | string | number | ruta o id generado |
Identidad usada por el modelo de seleccion de la lista padre. | ||
| title / subtitle | string | undefined |
Texto principal y secundario con relaciones accesibles automaticas. | ||
| prependIcon / appendIcon | string | IconPath | IconPath[] | undefined |
Renderiza un icono en la region inicial o final del item. | ||
| prependAvatar / appendAvatar | string | undefined |
Renderiza un avatar de imagen en la region inicial o final. | ||
| isActive / activeClass | boolean / string | undefined / "e-list-item--active" |
Sobrescribe el estado activo derivado del modelo y personaliza su clase. | ||
| disabled | boolean | false |
Retira el item de la interaccion y del foco administrado por teclado. | ||
| ripple | boolean | undefined |
Prop de compatibilidad para el contrato de ripple del item interactivo. | ||
| tag | string | "li" |
Sobrescribe el elemento raiz. La prop to renderiza router-link por defecto. | ||
| size | Size | "default" |
Sobrescribe el tamano heredado desde EList. | ||
| color / activeColor | string | undefined |
Sobrescribe los colores base o activo heredados para este item. | ||
Props de EListGroup
| Propiedad | Tipo | Por defecto |
|---|---|---|
| value | string | number | id generado |
Identidad estable usada para construir la ruta jerarquica del grupo. | ||
| disabled | boolean | false |
Deshabilita el activador y hereda el estado disabled de EList. | ||
| elevation | Elevation | undefined |
Aplica una clase de elevacion del framework al contenedor del grupo. | ||
Eventos y slots
EList emite update:modelValue y update:group. EListItem emite click:item. Los slots publicos son default en EList; default, prepend y append en EListItem; y activator y default en EListGroup.