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.

Sur cette page

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 est une page construite avec ce modèle.