Visuelle Elemente

Komponenten zur Anzeige strukturierter Daten und Medien.

Tabellen

Zeilenbasierte Tabellen

table {
  row = [Name, Type, Default],
  row = [title, String, Documentation],
  row = [theme, Object, Default theme]
}

Die erste row wird zur Tabellenüberschrift. Alle nachfolgenden Zeilen sind Inhaltszeilen.

CSV-Tabellen

Sie können Tabellen aus CSV-Daten mit dem Parameter csv rendern. Am einfachsten ist das Laden aus einer Datei mit readfile:

table { csv = readfile { src = sample-data.csv } }

Sie können CSV-Daten auch inline übergeben. Die CSV-Verarbeitung unterstützt Felder in Anführungszeichen mit Kommas und escapten Anführungszeichen.

Dies ist nützlich, um Daten vom Dokumentationsinhalt zu trennen oder um Daten zwischen Seiten zu teilen.

Listen

Ungeordnete Listen:

list { First item, Second item, Third item }

Geordnete Listen:

list { type = ordered, First, Second, Third }

Bilder

image { src = /logo.svg, alt = Tiramisu logo }

Bilder unterstützen Klicken zum Vergrößern. Sie können eine optionale Bildunterschrift hinzufügen:

image { src = /logo.svg, alt = Tiramisu logo, caption = The Tiramisu logo }

Die Bildunterschrift erscheint als kleiner Text unter dem Bild.

Preview

Karten

Navigationskarten zum Verlinken zwischen Seiten:

cards {
  card { title = Getting Started, description = Set up your project, href = /docs },
  card { title = Configuration, description = Customize your site, href = /docs }
}

Karten unterstützen optionale Parameter icon und image:

cards {
  card { title = Quick Start, description = Get up and running, href = /docs, icon = rocket },
  card { title = Gallery, description = Browse examples, href = /docs, image = /preview.png }
}

Preview

Schnellstart Schnell loslegen

Galerie Beispiele durchsuchen

Icons verwenden Iconify-Symbolnamen (siehe Icons). Bilder werden als Titelbild über dem Karteninhalt angezeigt.

Dateibäume

Verzeichnisstrukturen anzeigen:

filetree {
  folder { src,
    folder { docs,
      file { index.tiramisu },
      file { guide.tiramisu }
    },
    folder { lib,
      file { config.ts }
    }
  }
}