List

List e ListItem offrono un layout coerente per impostazioni, navigazione, attività e righe operative. Ogni item può mostrare un contenuto prima della scritta tramite leading, dopo tramite trailing, oppure entrambi. Usa dense quando lo spazio verticale è importante.

import { Badge, List, ListItem } from "@pompeitech/vesuvius-ui";

Contenuto prima e dopo

NotificheHai nuove attività3
Impostazioni account›

Dense

Usa dense sull’item per ridurre padding e spaziatura in tabelle, menu o liste di stato compatte.

Maya Chen
Online
Noah Williams
Assente

API

List — renderizza un <ul> e inoltra le prop native della lista.

Prop	Tipo	Default	Descrizione
`dividers`	`boolean`	`false`	Aggiunge separatori tra gli item adiacenti.

ListItem — renderizza un <li> e inoltra le prop native dell’item.

Prop	Tipo	Default	Descrizione
`leading`	`ReactNode`		Contenuto prima del contenuto principale.
`trailing`	`ReactNode`		Contenuto dopo il contenuto principale.
`dense`	`boolean`	`false`	Usa un layout più compatto con padding e gap ridotti.

Il contenuto dell’item può essere qualsiasi nodo React, incluso un titolo con descrizione secondaria. leading e trailing sono slot di layout: il componente mantiene dimensioni e allineamento coerenti senza richiedere utility class sull’item.