# DocPage

The documentation page template: the site header, the area navigation, the content and the page index, ready. Whoever uses it only fills in the regions.

## When to use

-   Auf jeder Seite der Feitio-Dokumentation: Grundlagen, Entwicklungsguides, Komponenten und Vorlagen.
-   Bei jeder Dokumentation, die nach Feitio folgt, ändern Sie nur das, was in die Regionen geht.

## Nicht verwenden

-   **Auf der Startseite:** Es ist eine Präsentation ohne Seitennavigation und ohne Index.
-   **Auf einem Produktarbeitsbildschirm:** Das ist das `AppShell`.

## Die Regionen

Die Vorlage teilt nur die Seite auf. Was in jede Region geht, kommt als Eigenschaft herein; es baut den Rest von selbst auf.

Region

Nimmt

Zum Zweck

`area`

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

Den Bereich der Website. Markiert den aktuellen Bereich im Header.

`sideNav`

die Bereichsnavigation

Die Gruppen und Seiten des Bereichs, wobei die aktuelle markiert ist. Links auf breiten Bildschirmen; im Drawer auf mobilen Geräten.

`crumb`

kurzer Text

Wo die Seite sitzt: der Bereich und die Gruppe.

`title`

Text

Der Seitentitel, das einzige `h1`.

`lede`

eine oder zwei Sätze

Was es ist, in einem Satz, direkt unter dem Titel.

`children`

die Abschnitte

Inhalt: Abschnitte mit `h2` und darin `h3`, jeder mit einem `id`. Der Anker stammt daraus.

`toc`

`true` (Standardwert), `false`

Anzeige des Ankers. Schalten Sie ihn nur bei kurzen, einzelabschnittigen Seiten aus.

### Was eingebaut ist

-   Der Site-Header: die Bereiche, Suche, Sprache, Tag und Nacht sowie GitHub.
-   Auf dem mobilen Gerät der Drawer mit all diesen Bereichen und der Navigation.
-   Der Anker, basierend auf `h2` und `h3` mit einem `id`: rechts auf großen Bildschirmen, oben links "Auf dieser Seite" auf mobilen Geräten.
-   Auf breiten Bildschirmen erstreckt sich die Navigationsspalte bis zum Footer mit der dünnen Linie; die Liste bleibt fest im Bildschirm verankert und scrollt bei Überlastung eigenständig mit ihrem eigenen ScrollFade. Der Anchor tut dasselbe, ohne die Linie.
-   Die Seite-ScrollFade, das BackToTop in der unteren rechten Ecke und der Footer.

## Breiten

-   **Mobile:** eine Spalte. Das Header versteckt sich beim Herunterscrollen und erscheint beim Hochscrollen wieder.
-   **Ab 64rem:** die Bereichsnavigation links in einer Spalte, die bis zum Footer reicht, sowie die Bereiche im Header.
-   **Ab 80rem:** der Anchor rechts.
-   **Große Bildschirme:** alles hält sich bei 90rem und bleibt zentriert; der Inhalt bei 46rem.

## Inhaltsregeln

-   Eine einzige `h1`, die `title`.
-   Jeder Abschnitt beginnt mit einer `h2` und hat ein `id`; Unterteile verwenden `h3`, ebenfalls mit einem `id`. Ohne `id` bleiben sie außerhalb des Anchors.
-   Beispiele gehen in ein `Example` mit ihrem Code.
-   Nichts außerhalb der Regionen: eine zusätzliche Leiste im Header, eine Notice, die an einer Ecke festgepinnt ist.

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

### Das von ihm erzeugte HTML

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

Die [Button](/de/components/button/)\-Seite wurde mit diesem Template erstellt.