Skip to main content
View as Markdown

Composants de contenu

Les composants de contenu rendent du texte et de la prose. Ils couvrent le texte enrichi et le markdown, les blocs de code avec coloration syntaxique, les accordéons repliables, les encarts stylisés, les citations, une table des matières générée automatiquement et l'interface de recherche au niveau de la page. Tous les composants de contenu prennent en charge la substitution de variables dans leur content ($record.*, $vars.*, key) et acceptent l'ensemble partagé props, ainsi que les modules visibility, responsive et i18n.

components:
  - type: text
    tag: h1
    content: Getting Started
  - type: text
    content: '$record.body'
    props: { format: markdown }
  - type: alert
    props: { variant: info, dismissible: true }
    content: 'Heads up — this is a callout.'

text

Le composant de contenu principal. Rend du texte inline, un élément sémantique (titre, paragraphe, citation) ou du markdown complet. Le même type text couvre les titres, paragraphes, blocs de code et citations via son tag/props.

Propriété Description
content Source texte ou markdown (prend en charge $record.*, $vars.*, key).
tag Élément sémantique : h1–h6, p, span, blockquote, code, etc.
props.format Définir sur markdown pour rendre content comme HTML assaini (titres, gras, italique, liens, images, listes imbriquées).
props.language Lorsque tag: code, la langue pour la coloration syntaxique.
props.lineNumbers Lorsque tag: code, définir sur true pour afficher les numéros de ligne.
props.cite Lorsque tag: blockquote, l'URL de la source de citation.
props Attributs HTML supplémentaires (p. ex. className).

La sortie markdown est assainie pour prévenir les attaques XSS (pas de balises <script> ni d'attributs gestionnaires d'événements). Les blocs de code incluent un bouton de copie vers le presse-papiers.

code

Un bloc de code autonome (équivalent à text avec tag: code, exposé comme type propre pour plus de clarté).

Propriété Description
content La source du code.
props.language Langue pour la coloration syntaxique (p. ex. ts, yaml, bash).
props.lineNumbers Afficher les numéros de ligne à côté du code.
props Attributs HTML supplémentaires.

toc

Génère automatiquement une table des matières à partir de la hiérarchie de titres de la page. Cliquer sur un lien fait défiler en douceur jusqu'à l'ancre du titre ; la section active est mise en évidence selon la position de défilement.

Propriété Description
props.sticky Définir sur true pour garder la table des matières fixée à la fenêtre lors du défilement.
props Attributs HTML supplémentaires (p. ex. className).

accordion

Sections de contenu repliables, chacune avec un déclencheur de résumé et un panneau de détail.

Propriété Description
children Éléments d'accordéon (chacun avec un libellé de résumé et un contenu de détail).
props.mode single replie les autres sections quand l'une s'ouvre ; multiple permet d'en ouvrir plusieurs à la fois.
props.defaultOpen Définir sur true pour rendre une section développée au chargement de la page.
props Attributs HTML supplémentaires.

blockquote

Un bloc de citation stylisé (équivalent à text avec tag: blockquote). Les citations imbriquées sont rendues avec une indentation croissante.

Propriété Description
content Le texte cité.
props.cite URL de la source de citation.
props Attributs HTML supplémentaires.

alert

Un bloc d'encart stylisé pour mettre en évidence des informations.

Propriété Description
content Le message d'alerte (prend en charge la substitution).
props.variant Style visuel : info, warning, error, ou success — chacun sélectionne automatiquement une icône et une couleur appropriées.
props.dismissible Définir sur true pour rendre un bouton de fermeture qui masque l'alerte.
props Attributs HTML supplémentaires.

searchInput

Un contrôle de champ de recherche au niveau de la page qui pilote le filtrage côté client d'une liste ou d'une table liée. (La configuration du moteur plein texte — indexation, poids, recherche publique — se trouve dans la section Recherche ; ceci est le bloc de construction de l'interface.)

Propriété Description
props.placeholder Texte indicatif affiché dans le champ de recherche.
props.debounceMs Délai d'anti-rebond avant le déclenchement de la recherche (les résultats se mettent à jour en direct après le délai).
props.minLength Longueur minimale de requête avant la recherche (empêche les recherches vides/courtes).
dataSource Liaison optionnelle lorsque le champ filtre une source de données en mode search.

pageSearch

Une expérience de recherche à portée de page composée d'un champ et d'une région de résultats, liée à une table consultable. À utiliser pour le filtrage d'enregistrements au sein de la page.

Propriété Description
dataSource Liaison de table en mode search (searchFields, debounce, maxResults).
props.placeholder Texte indicatif pour le champ de recherche.
children Composants optionnels de modèle de résultat.

Pages connexes