Éléments visuels

Composants pour afficher des données structurées et des médias.

Tableaux

Tableaux par lignes

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

La première ligne row devient l'en-tête du tableau. Toutes les lignes suivantes sont des lignes de corps.

Tableaux CSV

Vous pouvez afficher des tableaux à partir de données CSV en utilisant le paramètre csv. Le plus simple est de charger depuis un fichier avec readfile :

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

Vous pouvez également passer des données CSV en ligne. L'analyse CSV prend en charge les champs entre guillemets avec des virgules et les guillemets échappés.

Ceci est utile pour séparer les données du contenu de la documentation, ou pour partager des données entre les pages.

Listes

Listes non ordonnées :

list { First item, Second item, Third item }

Listes ordonnées :

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

Images

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

Les images supportent le zoom au clic. Vous pouvez ajouter une légende optionnelle :

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

La légende apparaît en petit texte sous l'image.

Preview

Cartes

Cartes de navigation pour créer des liens entre les pages :

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

Les cartes supportent les paramètres optionnels icon et 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

Démarrage rapide Soyez opérationnel rapidement

Galerie Parcourez les exemples

Les icônes utilisent les noms d'icônes Iconify (voir Icônes). Les images s'affichent comme image de couverture au-dessus du contenu de la carte.

Arborescences de fichiers

Affichez des structures de répertoires :

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