Listen, Bäume und Timelines

Beschreibungslisten für Details, sortierbare Listen zum Ziehen, Baumansichten für Ordner und Timelines für Ereignisse in Folge.

4 Components · 17 Variants

Kategorie wechseln

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

Beschreibungsliste5
Sortierbare Liste4
Zeitleiste4
Baumansicht4

description-list

Beschreibungsliste

Begriffe und Werte als echte dl, in gestapelten Zeilen, zwei Spalten, einem Raster aus Haarlinien, einer Metazeile oder einem Datenblatt mit Gruppen. Werte lassen sich kopieren, verlinken und mit Status versehen.

Gestapelt
Zwei Spalten
Raster
Metazeile
Datenblatt

Props und Details

Gestapelt

Begriff über Wert, für schmale Seitenpanels wie eine Bestellübersicht. Ein Statuspunkt, eine zweite Zeile, ein Kopierknopf, der zum Haken wird, und ein Link zur Rechnung.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/description-list

Bringt mit utils, kit, icon, copy-button

Usage

<DescriptionList title="Order #4821" items={[{ term: "Status", value: "Paid", tone: "success" }, …]} />

Source

Zwei Spalten

Begriff links, Wert rechts auf Haarlinien, auf dem Telefon einspaltig. Für Profil- und Einstellungsseiten, lange Listen klappen hinter Alle zeigen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/description-list

Bringt mit utils, kit, icon, copy-button

Usage

<DescriptionList variant="columns" title="Personal details" visible={5} items={…} action={<Button>Edit</Button>} />

Source

Raster

Eckdaten als Kacheln auf einem Raster aus Haarlinien, mit Icon und leiser zweiter Zeile. Passt zu Exposés, Fallstudien und Produktseiten, die Kacheln steigen beim Hereinscrollen auf.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/description-list

Bringt mit utils, kit, icon, copy-button

Usage

<DescriptionList variant="grid" columns={3} items={[{ term: "Price", value: "$612,000", icon: "tag" }, …]} />

Source

Metazeile

Die Zeile mit Fakten unter einer Seitenüberschrift, getrennt durch Haarlinien. Auf dem Telefon wird sie ein zweispaltiges Raster, die Rechnungsnummer kopiert sich mit einem Tipp.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/description-list

Bringt mit utils, kit, icon, copy-button

Usage

<DescriptionList variant="inline" items={[{ term: "Invoice", value: "2026-0148", copy: true }, …]} />

Source

Datenblatt

Gruppierte Daten mit sanften Zebrazeilen für Produktseiten. Die ersten Zeilen stehen da, Alle zeigen klappt den Rest auf, neue Zeilen blenden ein.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/description-list

Bringt mit utils, kit, icon, copy-button

Usage

<DescriptionList variant="spec" visible={8} items={[{ group: "Motor", term: "Battery", value: "540 Wh" }, …]} />

Source

sortable-list

Sortierbare Liste

Dinge in Reihenfolge bringen, per Ziehen, Tastatur oder Knöpfen. Die anderen gleiten zur Seite, jede Bewegung wird für Screenreader angesagt.

Liste
Rangfolge
Fotoraster
Zwei Spalten

Props und Details

Liste

Zeilen mit Griff. Ziehen, oder Leertaste drücken, mit Pfeilen bewegen, mit Leertaste ablegen, Escape stellt zurück. Eine kleine Notiz bestätigt jede neue Reihenfolge.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sortable-list

Bringt mit utils, kit, icon

Usage

<SortableList label="Agenda" items={agenda} onChange={(order) => save(order)} />

Source

Rangfolge

Gereihte Karten für Umfragen und Prioritäten. Die Zahlen rollen an ihren neuen Platz, Knöpfe für hoch und runter stehen neben dem Griff für alle, die lieber klicken.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sortable-list

Bringt mit utils, kit, icon

Usage

<SortableList variant="cards" label="What matters most" items={criteria} />

Source

Fotoraster

Bilder als Kacheln, das erste ist das Titelbild. Eine Kachel am Griff ziehen oder mit den Pfeilen in alle vier Richtungen bewegen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sortable-list

Bringt mit utils, kit, icon

Usage

<SortableList variant="grid" label="Product photos" items={photos.map((p) => ({ id: p.id, label: p.alt, media: <img src={p.src} alt="" /> }))} />

Source

Zwei Spalten

Einträge zwischen zwei Listen verschieben, per Ziehen, per Pfeilknopf je Zeile oder mit links und rechts auf der Tastatur. Anzahlen folgen, eine leere Liste zeigt, wohin.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/sortable-list

Bringt mit utils, kit, icon

Usage

<SortableList variant="columns" columns={[{ id: "shown", title: "Shown", items }, { id: "hidden", title: "Hidden", items: [] }]} />

Source

timeline

Zeitleiste

Ereignisse der Reihe nach: Verläufe, Geschichte, Sendungsverfolgung und Änderungen.

Aktivität
Geschichte
Sendungsverfolgung
Änderungen

Props und Details

Aktivität

Icons auf einer Linie, Zeiten rechts, Vorschauen unter den Ereignissen.

Installv1.0.0

aiw add @ai-website/timeline

Bringt mit utils, kit, icon, reveal

Usage

<Timeline items={[{ icon: "globe", title: "Published", time: "Today, 09:12" }]} />

Source

Geschichte

Eine Mittellinie mit Meilensteinen auf beiden Seiten, Bilder dazwischen.

Installv1.0.0

aiw add @ai-website/timeline

Bringt mit utils, kit, icon, reveal

Usage

<Timeline variant="alternate" items={milestones} />

Source

Sendungsverfolgung

Waagerechte Schritte mit erledigt, aktuell und geplant.

Installv1.0.0

aiw add @ai-website/timeline

Bringt mit utils, kit, icon, reveal

Usage

<Timeline variant="horizontal" items={steps} />

Source

Änderungen

Kleine Marker, Daten in einer Spalte, Versionen als Abzeichen.

Installv1.0.0

aiw add @ai-website/timeline

Bringt mit utils, kit, icon, reveal

Usage

<Timeline variant="compact" items={releases} />

Source

tree-view

Baumansicht

Verschachtelte Listen, die auf- und zugehen, als Dateien mit Änderungsmarken, Doku-Navigation, Rechte mit gemischten Häkchen oder Gliederung mit Leitlinien. Volle Tastatur nach dem Baum-Muster.

Dateien
Navigation
Häkchen
Gliederung

Props und Details

Dateien

Ordner öffnen sich mit weicher Höhe, Dateien tragen Größe und Änderungsmarke (neu, geändert, gelöscht). Pfad und gezeichnete Datei folgen der Auswahl, Pfeile und Buchstaben bewegen durch den Baum.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/tree-view

Bringt mit utils, kit, icon

Usage

<TreeView label="Project files" items={files} defaultExpanded={["src", "components"]} defaultSelected="menu" />

Source

Navigation

Eine Doku-Seitenleiste. Abschnitte klappen auf, Seiten sind Links, die aktuelle Seite trägt einen Balken auf der Leitlinie und aria-current. Der Artikel daneben wechselt mit weicher Unschärfe.

Im Studio öffnen

Häkchen

Rechte einer Rolle. Ein Zweig hakt alle Kinder ab, ein teilweise gewählter Zweig zeigt einen Strich, gesperrte Rechte bleiben sichtbar. Alle öffnen und schließen stehen darüber, ein Zähler folgt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/tree-view

Bringt mit utils, kit, icon

Usage

<TreeView variant="checkbox" toolbar label="Permissions" items={rights} defaultChecked={["pages-view", "pages-edit"]} />

Source

Gliederung

Leitlinien verbinden jede Ebene, Anzahlen stehen am Ende. Die Wahl eines Teams aktualisiert die Karte daneben, die beim Scrollen der Gliederung stehen bleibt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/tree-view

Bringt mit utils, kit, icon

Usage

<TreeView variant="outline" label="Teams" items={teams} defaultSelected="engineering" />

Source

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Listen, Bäume und Timelines stehen.

Auf dieser Seite

Gestapelt

Zwei Spalten

Raster

Metazeile

Datenblatt

Liste

Rangfolge

Fotoraster

Zwei Spalten

Aktivität

Geschichte

Sendungsverfolgung

Änderungen

Dateien

Navigation

Häkchen

Gliederung

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit