# 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`.

```yaml
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.                                     |

## `carousel`

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](/fr/docs/content-components#accordion).)

| 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`](/fr/docs/layout-components#tab-panel). (Aussi documenté dans [Composants de navigation](/fr/docs/navigation-components#tabs).)

| 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

- [Présentation des pages](/fr/docs/pages-overview) — le modèle de composants.
- [Composants de mise en page](/fr/docs/layout-components) — conteneurs, cartes, panneaux d'onglets.
- [Composants de données](/fr/docs/data-components) — tables liées à des données vs. `static-table`.
- [Composants de contenu](/fr/docs/content-components) — texte, code, encarts.