List
Filas con contenido a la izquierda, título, descripción y acción a la derecha.
Usar
import {
List,
ListItem,
} from "@unozero-ai/ui/react";
<List></List>Lo básico
Cada ListItem lleva un heading (el title del kit React) y, si hace falta, una description de una línea: los dos se cortan con puntos suspensivos en vez de crecer. Usa List para pocas filas que se leen de arriba abajo; cuando hay que comparar varias columnas, usa DataTable.
meta pone a la derecha un dato corto en mono con tabular-nums, como el precio de cada tarifa, para que se compare de una fila a otra (la Regla de los Tres Papeles). Una fila que no hace nada al pulsarla no se resalta al pasar el ratón: en el kit React hoverable venía activado y había que apagarlo; ahora es al revés, y hoverable solo fuerza el resalte. divided={false} quita los separadores.
Con avatar y estado
El slot leading pone a la izquierda un avatar o un icono y el slot trailing a la derecha una insignia o una acción; en el kit React eran las props leading y trailing. Ninguno de los dos se encoge: lo que cede espacio en pantallas estrechas es el texto. El estado de cada conversación lo dice la palabra de la insignia, no solo su color (la Regla del Tenant). Para un título o una descripción con formato, usa el slot por defecto o el slot description.
Selección
interactive convierte la fila en un botón: recibe foco, responde a Enter y Espacio y avisa con un click en el elemento. active marca la fila abierta con un tinte suave y aria-current, como el hotel que se está editando. En el kit React había que completar la fila a mano con tabIndex, el teclado y aria-current; ahora lo trae la fila.
Filas que enlazan
Con href, la fila es un enlace: se abre en otra pestaña, se copia y el navegador sabe adónde lleva. Úsalo cuando la fila lleva a otra página, como el detalle de una factura, y deja interactive para lo que cambia algo en la misma vista. La insignia del slot trailing queda fuera del enlace.
Con acción a la derecha
Cuando lo que se pulsa es un botón y no la fila, deja la fila inerte y pon un IconButton en el slot trailing: queda fuera del enlace o del botón de la fila, así que nunca hay un control dentro de otro. Una fila con tres botones rellenos son tres decisiones (la Regla de una Sola Decisión): el icono es discreto, y con variant="danger" solo se tiñe de rojo al pasar el ratón. Su label nombra la acción y a quién afecta: es lo único que oye un lector de pantalla.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).