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.

Auf dieser Seite

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-Seite wurde mit diesem Template erstellt.