Les composants

Un composant est un bloc qui met en forme une partie de la diapositive. On l'écrit avec des deux-points, et leur nombre indique ce que le composant contient :

• ::Nom entoure du texte et se ferme par :: ;
• :::Nom contient d'autres composants et se ferme par ::: ;
• :nom{…} s'insère dans une phrase.

On écrit les réglages d'un composant entre accolades, ::Quote{author="…"} par exemple. Dans l'éditeur du studio, le bouton « Aide », en bas à droite, liste les composants et insère chacun dans le texte.

Le texte

Quote affiche une citation et son auteur. Highlight met en avant un message. Fragments fait apparaître les éléments d'une liste un par un, à chaque appui sur la flèche droite. :i{name="…"} insère une icône du jeu Remix Icon, dont le nom commence par ri:.

### :i{name="ri:chat-quote-line"} Ce que disent les usagers

::Quote{author="Une usagère, entretien du 3 octobre"}
Je retrouve ma demande sans chercher.
::

---

### Les trois étapes

::Fragments
- La demande est déposée.
- Un agent l'instruit.
- L'usager reçoit la réponse.
::

::Highlight{variant="accent"}
Quinze jours en moyenne.
::

Les colonnes

Columns place ses blocs Column côte à côte. span règle la largeur relative d'une colonne : span="2" à côté de span="1" donne deux tiers et un tiers.

### Ce qui change

:::Columns
::Column{span="2"}
#### Pour l'usager
Il suit sa demande en ligne et reçoit un message à chaque étape.
::

::Column{span="1"}
#### Pour l'agent
Il voit les pièces manquantes.
::
:::

Les images et les pages web

Image affiche une image avec sa légende ; :preview="true" l'agrandit au clic. FullScreenImage étend une image à toute la diapositive. Iframe affiche une page web. Pour placer une image à côté du texte, suivez le guide Placer une image à côté du texte.

### Le catalogue

::Image{src="/images/studio/catalogue.png" alt="Le catalogue du studio" width="70%" :preview="true"}
Le catalogue, rangé par dossier.
::

Les schémas

Mermaid dessine un diagramme décrit en texte, avec la syntaxe de Mermaid. Écrivez le diagramme dans un bloc de code mermaid, comme le fait le studio quand on insère le composant.

### Le parcours d'une demande

::Mermaid
```mermaid
flowchart LR
  depot[Dépôt] --> instruction[Instruction] --> reponse[Réponse]
```
::

Scheme aligne des étapes illustrées par des pictogrammes du Système de Design de l'État, reliées par des flèches. Par défaut, chaque étape apparaît à l'appui suivant sur la flèche droite ; :fragments="false" affiche toutes les étapes dès l'arrivée sur la diapositive.

### Le parcours d'une demande

:::Scheme{:fragments="false"}
::Step{n="1" picto="document/document-add" title="Dépôt"}
L'usager remplit le formulaire.
::
::Step{n="2" picto="digital/in-progress" title="Instruction"}
Un agent vérifie les pièces.
::
::Step{n="3" picto="digital/mail-send" title="Réponse"}
L'usager reçoit un message.
::
:::

Les notes et les stories

Notes contient les notes de l'orateur, affichées dans la vue conférencier : le guide Ajouter des notes de présentation les décrit. StoryFrame et Screens affichent des stories Storybook : le guide Intégrer une story Storybook les décrit.

La liste complète

La référence décrit les composants de chaque paquet :

• @vignettes/nuxt pour le texte, les colonnes, les images, Mermaid, Notes et Fragments ;
• @vignettes/schemas pour Scheme, Diagram et JsonTour ;
• @vignettes/storybook pour StoryFrame et Screens.