Todos los componentes (204)

Lista

Tipografía · List

Qué es y cuándo usarlo

Lista de texto: con viñeta, numerada o con icono propio.

Cuándo usarlo

Para enumerar: ventajas, requisitos, pasos de una explicación.
marker="number" solo cuando el orden SIGNIFICA algo (pasos, puestos). Si no, viñeta; none la quita junto con la sangría.
icon pone el mismo icono en todas las entradas, y cada entrada puede llevar el suyo. spacing="tight" aprieta una lista larga dentro de una tarjeta.

Cuándo no

Para pares de dato y valor (una ficha), DataList.
Para una lista de la que se elige algo, SelectableList; y si son miles de filas, VirtualList.
Para los pasos de un proceso con estado, Steps.

Teclado: no participa. No es interactiva.

Accesibilidad: al quitar la viñeta con list-style: none, Safari con VoiceOver deja de anunciarla como lista y se pierde el «lista de 5 elementos». Por eso, sin viñeta, el componente repone role="list" y role="listitem" a mano. El icono va marcado como decorativo: un tache verde no puede ser lo único que diga «incluido».

Aspecto fino: --amset-text-list-gap, --amset-text-list-indent y --amset-text-list-marker.

Cómo se ve

Envío en 24 horas a península
Devolución gratuita durante 30 días
Garantía de dos años

Elige los productos
Confirma la dirección
Paga

Facturas automáticas
Cinco usuarios

<List
  label="Lo que incluye el envio"
  items={[
    { content: 'Envio en 24 horas a peninsula' },
    { content: 'Devolucion gratuita durante 30 dias' },
  ]}
/>
<List label="Como comprar" marker="number" items={pasos} />
<List label="Ventajas del plan" icon={<CheckIcon />} items={ventajas} />

Props

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

Prop	Tipo	Para qué sirve
`items`obligatoria	`readonly ListItem[]`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`icon`	`ReactNode`	Icono para todas las entradas. Cada entrada puede poner el suyo.
`label`	`string`	Nombre de la lista, cuando hace falta distinguirla de otra al lado.
`marker`	`"number" \| "none" \| "bullet"`	`bullet` es una lista sin orden, `number` una ordenada (y ahi el orden SIGNIFICA algo: pasos, puestos), `none` quita la viñeta y la sangria.
`size`	`"sm" \| "md" \| "lg"`	—
`spacing`	`"normal" \| "tight"`	`tight` para una lista larga dentro de una tarjeta.

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

En el banco de pruebas

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