Todos los componentes (204)

Lista de datos

Datos · DataList · .amset-data

Qué es y cuándo usarlo

Pares etiqueta-valor: la ficha de un cliente, el resumen de un pedido, los datos de un producto. En una columna o en varias, con la etiqueta encima o al lado.

Cuándo usarlo

Para enseñar los datos de una sola cosa, que se leen de uno en uno.
columns (hasta 4) para fichas anchas: es un máximo, y los pares se ponen uno debajo de otro cuando una columna quedaría más estrecha que 12rem (18rem en horizontal). Lo decide el ancho de la lista, no el de la ventana. full en un dato para que ocupe toda la fila (direcciones, notas).
size: el cuerpo de la letra, sm en un panel lateral o lg en una ficha que ocupa la pantalla.
orientation="horizontal" para una ficha con la etiqueta a la izquierda. En paneles estrechos, dentro de un contenedor con data-density="compact": la densidad es global, no una prop.
Un valor vacío (null, undefined o '') sale con un guion, o con lo que diga empty: nunca un hueco en blanco.

Cuándo no

Muchas cosas con los mismos datos, para compararlas: Table.
Una cifra de cuadro de mando con su variación: Stat.
Líneas de un pedido con subtotal y total: OrderSummary.

Teclado: no tiene; se recorre lo que haya dentro de los valores (un enlace, un botón).

Accesibilidad: va sobre dl, dt y dd de verdad, así que el lector de pantalla dice «NIF, B41234567» y no dos textos sueltos. El title es un encabezado del nivel de headingLevel (h3 por defecto).

Aspecto fino: variables CSS --amset-data-*: -slot-rows y -slot-columns (los huecos entre pares), -padding-divider (el aire a cada lado de la raya con dividers), que bajan en densidad compacta; -width-label (la etiqueta en horizontal: 10rem, 8 en sm, 12 en lg; si no queda sitio, el valor baja debajo), -width-min (el de una columna) y -font, -font-label y -font-title. Las rayas van en medio del hueco entre filas, con cualquier número de columnas.

Cómo se ve

Resumen

Pedido: 4821
Estado: Entregado
Total: 148,20 €

<DataList
  title="Resumen"
  data={[
    { key: 'pedido', label: 'Pedido', value: '4821' },
    { key: 'total', label: 'Total', value: '148,20 EUR' },
  ]}
/>

Props

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

Prop	Tipo	Para qué sirve
`data`obligatoria	`readonly DataListItem[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`columns`	`3 \| 4 \| 2 \| 1`	Cuantas columnas caben como mucho. Van por el ancho del contenedor, no el de la ventana: en una columna lateral estrecha se ponen una debajo de otra aunque la pantalla sea ancha.
`dividers`	`boolean`	Linea entre datos. Ayuda en fichas largas.
`empty`	`ReactNode`	Que poner cuando un valor viene vacio. Por defecto, un guion.
`headingLevel`	`LevelTitleData`	—
`orientation`	`DataListOrientation`	Etiqueta encima en vertical; al lado en horizontal, como una ficha.
`size`	`"sm" \| "md" \| "lg"`	El cuerpo del texto: `sm` en un panel lateral, `lg` en una ficha que ocupa la pantalla.
`title`	`string`	—

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-data-font`	`var(--amset-text-base)`
`--amset-data-font-label`	`var(--amset-text-sm)`
`--amset-data-font-title`	`var(--amset-text-lg)`
`--amset-data-width-label`	`10rem`

Cómo se cambia

.amset-data {
  --amset-data-font: ...;
  --amset-data-font-label: ...;
}

En el banco de pruebas

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