Skip to main content
View as Markdown

Composants d'affichage

Les composants d'affichage présentent du contenu statique ou structurel non lié à une source de données de table : tables codées en dur, palettes de commandes, états vides, panneaux divisés redimensionnables, zones de défilement, bulles de dialogue de chat, carrousels, accordéons et conteneurs d'onglets. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

components:
  - type: static-table
    headers: [Plan, Price, Seats]
    rows:
      - [Free, '$0', '1']
      - [Pro, '$29', '10']
    caption: 'Pricing tiers'

static-table

Une table peuplée à partir de données inline (pas d'une source de données).

Propriété Description
headers Libellés des en-têtes de colonnes.
rows Données de lignes sous forme de tableau de tableaux de chaînes.
caption Texte de légende affiché au-dessus ou en dessous de la table.

command

Une palette de commandes (style ⌘K) de groupes de commandes consultables.

Propriété Description
groups Groupes de commandes. Chaque groupe a un titre et des items ({ label, icon, shortcut }).

empty-state

Un espace réservé affiché lorsqu'il n'y a rien à afficher.

Propriété Description
icon Nom d'icône Lucide pour l'illustration.
title Texte du titre.
description Texte de support sous le titre.
children Composants d'appel à l'action optionnels.

resizable

Panneaux divisés redimensionnables séparés par une poignée déplaçable.

Propriété Description
direction Direction de disposition des panneaux : horizontal ou vertical.
defaultSizes Tailles de panneaux par défaut en pourcentages (doivent totaliser 100).
minSize Taille minimale de panneau en pourcentage.
children Les composants des panneaux.

scroll-area

Une région défilable avec barres de défilement personnalisées.

Propriété Description
orientation Axe de défilement : vertical, horizontal, ou both.
maxHeight Hauteur maximale CSS pour la zone (p. ex. 400px).
children Le contenu défilable.

speech-bubble

Une bulle de message de style chat (utilisée dans les interfaces de conversation).

Propriété Description
content Le texte du message.
props Attributs HTML — généralement className pour l'alignement/la couleur de l'expéditeur.

list-item

Un élément de liste unique, utilisé comme bloc de construction dans les listes et les menus.

Propriété Description
content Contenu inline.
children Composants imbriqués.
props Attributs HTML.

aspect-ratio

Contraint un enfant à un ratio largeur/hauteur fixe.

Propriété Description
ratio Ratio largeur/hauteur (p. ex. 16/9 = 1,778, 1 = carré).
children Le composant contraint.

Un diaporama de diapositives enfants avec lecture automatique et navigation optionnelles.

Propriété Description
orientation Direction de défilement : horizontal ou vertical.
autoplay Avancer automatiquement les diapositives.
autoplayInterval Intervalle entre les transitions de lecture automatique (ms).
showDots Afficher les indicateurs à points sous le carrousel.
showArrows Afficher les flèches de navigation précédente/suivante.
children Les composants de diapositive.

accordion

Sections de contenu repliables. (Aussi documenté dans Composants de contenu.)

Propriété Description
type Sections ouvertes single ou multiple.
defaultOpen IDs des éléments ouverts par défaut.
children Les éléments d'accordéon.

tabs

Un conteneur à onglets contenant des enfants tab-panel. (Aussi documenté dans Composants de navigation.)

Propriété Description
orientation Disposition des déclencheurs : horizontal ou vertical.
defaultValue ID de l'onglet actif par défaut.
children Les composants tab-panel.

Pages connexes