Todos los componentes (204)

Elemento

Datos · Item · .amset-item

Qué es y cuándo usarlo

Una fila genérica: un medio a la izquierda, un título con su descripción en medio y unas acciones a la derecha. Es lo que hay detrás de una lista de ficheros, de clientes, de ajustes o de resultados de búsqueda, y no trae ninguna forma de dato: lo que tengas, lo pones en sus huecos.

Cuándo usarlo

Para una lista de cosas con nombre, un detalle y alguna acción: ficheros, personas, pedidos, ajustes.
Con ItemGroup para una lista de ellos, que el lector de pantalla anuncia como lista.

Cuándo no

Para pares de etiqueta y valor de un mismo objeto: es una DataList.
Para filas con columnas que se comparan o se ordenan: es una Table.
Para un hilo de mensajes: es una Conversation.

Teclado: con href o onPress, el título es el enlace o el botón y su zona se estira por CSS hasta cubrir la fila entera: un solo elemento interactivo en vez de una fila «clicable» sin nada enfocable dentro. Las actions van por encima y siguen siendo botones aparte (un botón dentro de un enlace no es HTML válido), así que la fila tiene un tabulador y cada acción el suyo.

Accesibilidad: el medio es decorativo y va escondido para el lector: el título ya dice qué es. Con href, current pone aria-current="page". Apagado, el título deja de ser enlace o botón. En un ItemGroup, cada elemento es un listitem.

Aspecto fino: variables CSS --amset-item-media (lado del medio), --amset-item-padding-block, --amset-item-padding-inline y --amset-item-title (tamaño del título).

Cómo se ve

PedidosSeguimiento y devoluciones

EnvíosDirecciones y plazos de entrega

informe-q3.pdf1,5 MB · subido hace 2 min

Pulsa una fila entera o la equis.

<ItemGroup label="Tu cuenta" separated>
  <Item title="Pedidos" description="Seguimiento y devoluciones" media={<PackageIcon />} mediaKind="icon" href="/pedidos" />
  <Item title="Envíos" description="Direcciones y plazos de entrega" media={<TruckIcon />} mediaKind="icon" href="/envios" />
</ItemGroup>
<Item
  title="informe-q3.pdf"
  description="1,5 MB · subido hace 2 min"
  media={<FileIcon />}
  mediaKind="icon"
  variant="outline"
  actions={<IconButton aria-label="Quitar informe-q3.pdf" size="sm" onPress={quitar}><CrossIcon /></IconButton>}
/>

Props

Se importa con import { Item } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`title`obligatoria	`ReactNode`	Lo que es: el nombre del fichero, del cliente, del ajuste.
`actions`	`ReactNode`	Lo que va a la derecha: botones, una insignia, una fecha. Se pueden pulsar aunque el elemento entero sea un enlace.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`current`	`boolean`	La página en la que se está: lleva `aria-current="page"`. Solo con `href`.
`description`	`ReactNode`	Una línea o dos que lo explican.
`disabled`	`boolean`	Apagado: se ve apagado y el título deja de ser enlace o botón.
`href`	`string`	Con esto el elemento entero es un enlace de verdad: el título es el `<a>` y su zona cubre toda la fila.
`media`	`ReactNode`	Lo que va a la izquierda: un icono, una miniatura, un avatar. Es decorativo -el título ya dice qué es-, así que va escondido para el lector de pantalla.
`mediaKind`	`ItemMediaKind`	Cómo se encaja el medio: `icon` en un cuadrado con fondo, `image` recortada, `avatar` tal cual.
`onNavigate`	`(href: string) => void`	Con `href`, llama a esto en vez de recargar (o el enrutador de `RouterProvider`).
`onPress`	`MouseEventHandler<HTMLButtonElement>`	Con esto el elemento entero es un botón: el título es el `<button>` y su zona cubre toda la fila.
`size`	`"sm" \| "md" \| "lg"`	—
`variant`	`"outline" \| "raised" \| "flat"`	`flat` (por defecto) sin caja, `outline` con borde, `raised` con borde y sombra.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-item-padding-block`	`var(--amset-space-3)`
`--amset-item-padding-inline`	`var(--amset-space-4)`
`--amset-item-media`	`2.5rem`
`--amset-item-title`	`var(--amset-text-base)`

Cómo se cambia

.amset-item {
  --amset-item-padding-block: ...;
  --amset-item-padding-inline: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: