# DocPage

Le modèle de page de documentation : l'en-tête du site, la zone de navigation, le contenu et l'index de page, tout est prêt. Quiconque l'utilise ne remplit que les zones.

## Lorsqu'il faut utiliser

-   Sur chaque page de la documentation Feitio : fondations, guides de développement, composants et modèles.
-   Sur toute documentation qui suit Feitio, en modifiant uniquement ce qui va dans les zones.

## Lorsqu'il ne faut pas utiliser

-   **Sur la page d'accueil du site :** c'est une présentation, sans navigation latérale ni index.
-   **Sur un écran de travail de produit :** c'est le `AppShell`.

## Les régions

Le modèle ne divise que la page. Ce qui se place dans chaque région arrive comme une propriété ; il construit le reste lui-même.

Région

Prenne

Pour quoi

`area`

`"design"`, `"dev"`, `"comp"`

L'espace du site. Marque l'aire actuelle dans l'en-tête.

`sideNav`

la navigation d'espace

Les groupes et pages de l'espace, avec le courant marqué. À gauche sur grands écrans ; dans le Drawer sur mobile.

`crumb`

court texte

Où se trouve la page : l'espace et le groupe.

`title`

texte

Le titre de page, le seul `h1`.

`lede`

une ou deux phrases

Ce qu'il est, en une phrase, juste sous le titre.

`children`

les sections

Le contenu : des sections avec `h2` et, à l'intérieur, `h3`, chacune possédant un `id`. L'ancrage provient d'eux.

`toc`

`true` (par défaut), `false`

Affiche l'ancrage. Désactivez-le uniquement sur les pages courtes à une seule section.

### Ce qui est inclus par défaut

-   L'en-tête du site : les zones, Recherche, langue, jour et nuit, et GitHub.
-   Sur mobile, le Drawer avec tout cela et la zone de navigation.
-   L'ancrage, construit à partir du `h2` et du `h3` avec un `id` : sur la droite sur les écrans larges, dans une fermeture "Sur cette page" sur mobile.
-   Sur les grands écrans, la colonne de navigation descend jusqu'au pied de page, avec la fine ligne ; la liste reste fixée à l'écran et, lorsqu'elle ne tient pas, défile elle-même avec son propre ScrollFade. L'ancrage fait de même, sans la ligne.
-   Le ScrollFade de la page, le BackToTop dans le coin inférieur droit, et le pied de page.

## Largeurs

-   **Mobile :** une colonne. L'en-tête se cache lors du défilement vers le bas et réapparaît lors du défilement vers le haut.
-   **A partir de 64rem :** la zone de navigation à gauche, dans une colonne qui descend jusqu'au pied de page, et les zones dans l'en-tête.
-   **A partir de 80rem :** l'ancrage sur la droite.
-   **Ecrans larges :** tout s'arrête à 90rem et reste centré ; le contenu, à 46rem.

## Règles de contenu

-   Un seul `h1`, le `title`.
-   Chaque section commence par un `h2` et possède un `id` ; les sous-sections utilisent `h3`, également avec un `id`. Sans `id`, elles restent hors de l'ancrage.
-   Les exemples vont dans un `Example`, avec son code.
-   Rien en dehors des régions : une barre supplémentaire dans l'en-tête, une notice fixée dans un coin.

## Code

### React

```jsx
<DocPage
  area="comp"
  sideNav={componentsNav}
  crumb="Componentes, base"
  title="Button"
  lede="Um botão faz uma ação na tela onde está."
>
  <Section id="quando" title="Quando usar">…</Section>
  <Section id="exemplos" title="Exemplos">
    <Example id="ex-principal" title="Principal" code={primarySource}>
      <Button variant="primary">Salvar alterações</Button>
    </Example>
  </Section>
</DocPage>
```

### Le HTML qu'il produit

```html
<header class="site-header">…</header>          <!-- automático -->
<div class="site-body has-side has-toc">
  <aside class="site-side">                   <!-- a coluna, até o rodapé -->
    <div class="side-inner">…sideNav…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
  <main class="site-main" id="conteudo" tabindex="-1">
    <p class="crumb">…crumb…</p>
    <h1>…title…</h1>
    <p class="lede">…lede…</p>
    <details class="toc-mobile">…</details>    <!-- automático, dos h2 e h3 -->
    …children…
  </main>
  <aside class="site-toc">                    <!-- automático, dos h2 e h3 -->
    <div class="side-inner">…Anchor…<span class="feitio-scroll-fade" aria-hidden="true"></span></div>
  </aside>
</div>
<a class="feitio-button feitio-back-to-top" …>Topo</a>   <!-- automático -->
<span class="feitio-scroll-fade" aria-hidden="true"></span>   <!-- automático -->
<footer class="site-footer">…</footer>       <!-- automático -->
```

La page [Button](/fr/components/button/) est une page construite avec ce modèle.