Skip to main content
Voir en 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, états vides, zones de défilement, bulles de dialogue de chat, bandeaux défilants, accordéons et conteneurs d'onglets. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

app.yaml
components:
  - type: static-table
    tableHeaders: [Plan, Price, Seats]
    tableRows:
      - [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
tableHeaders Libellés des en-têtes de colonnes.
tableRows 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.

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.

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.

marquee

Une bande d'enfants sur une piste qui défile en continu. Utilise-la pour montrer plus d'éléments qu'il n'en tient à l'écran — une rangée de captures d'applications, un ensemble de logos — comme une démonstration plutôt qu'une grille statique. Les enfants sont dupliqués en interne pour que la boucle n'ait aucune couture visible ; le duplicata est masqué aux technologies d'assistance, donc chaque élément n'est annoncé qu'une fois.

Propriété Description
marqueeDirection Direction du défilement : left, right, up ou down (par défaut left).
marqueeSpeed Secondes pour une boucle complète. Plus la valeur est grande, plus c'est lent.
marqueeGap Longueur CSS entre les éléments, p. ex. 2rem ou 24px.
pauseOnHover Mettre en pause quand le pointeur survole la bande, et quand un enfant a le focus clavier.
marqueeFade Estomper les bords d'entrée et de sortie, pour que les éléments semblent entrer et sortir.
pauseControl Afficher un bouton explicite de pause et de reprise.
children Les composants à faire défiler.
app.yaml
components:
  - type: marquee
    marqueeDirection: right
    marqueeSpeed: 30
    marqueeGap: 2rem
    pauseOnHover: true
    marqueeFade: true
    children:
      - type: link
        props:
          href: /apps/invoicing
        content: Invoicing
      - type: link
        props:
          href: /apps/recruiting
        content: Recruiting

Donne au lecteur un moyen de l'arrêter

Un contenu qui bouge plus de quelques secondes doit pouvoir être arrêté (WCAG 2.2.2). Active pauseOnHover, pauseControl, ou les deux. pauseOnHover couvre le pointeur et le focus clavier — le survol seul laisse un utilisateur au clavier poursuivre un lien qui défile sous ses doigts. pauseControl couvre le visiteur qui n'a ni l'un ni l'autre.

Les visiteurs qui demandent à leur système de réduire les animations n'obtiennent aucune boucle. Rien ne leur est caché : chaque élément reste atteignable et la bande reste défilable à la main, donc ils perdent l'animation et rien d'autre.

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

Dernière mise à jour 11 août 2026

Modifier cette pageSignaler un problème

Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta. Les contributions et corrections sont les bienvenues.

Construit avec Sovrium