DocPage

La plantilla de la página de documentación: el encabezado del sitio, la navegación del área, el contenido y el índice de la página, todo listo. Quien lo utilice solo rellenará las regiones.

En esta página

Cuándo usarlo

En cada página de la documentación de Feitio: fundamentos, guías de desarrollo, componentes y plantillas.
En cualquier documentación que siga a Feitio, cambiando solo lo que va en las regiones.

Cuándo no usarlo

En la página principal del sitio: es una presentación, sin navegación lateral ni índice.
En una pantalla de trabajo de producto: es decir, el AppShell.

Las regiones

La plantilla solo divide la página. Lo que va en cada región entra como propiedad; construye el resto por sí misma.

Región	Toma	Para qué sirve
`area`	`"design"`, `"dev"`, `"comp"`	El área del sitio. Marca el área actual en el encabezado.
`sideNav`	la navegación de áreas	Los grupos y páginas del área, con la actual marcada. A la izquierda en pantallas anchas; en el Drawer en móvil.
`crumb`	texto corto	Dónde se sitúa la página: el área y el grupo.
`title`	texto	El título de la página, el único `h1`.
`lede`	una o dos frases	Qué es, en una sola frase, justo debajo del título.
`children`	las secciones	El contenido: secciones con `h2` y, dentro de ellas, `h3`, cada una con un `id`. El Anclaje proviene de ellos.
`toc`	`true` (predeterminado), `false`	Muestra el Anclaje. Apágalo solo en páginas cortas con una sola sección.

Lo que viene integrado

El encabezado del sitio: las áreas, Búsqueda, idioma, día y noche, y GitHub.
En móvil, el Drawer con todo eso y la navegación de área.
El Ancla, construido con h2 y h3 con un id: a la derecha en pantallas anchas, en una pestaña cerrada "En esta página" en móvil.
En pantallas anchas, la columna de navegación baja hasta el pie de página, con la línea fina; la lista permanece fijada en pantalla y, cuando no cabe, se hace scroll por sí misma con su propio ScrollFade. El Ancla hace lo mismo, sin la línea.
El ScrollFade de la página, el BackToTop en la esquina inferior derecha y el pie de página.

Anchos

Móvil: una columna. El encabezado se oculta al hacer scroll hacia abajo y vuelve a aparecer al hacer scroll hacia arriba.
A partir de 64rem: la navegación en la zona izquierda, en una columna que baja hasta el pie de página, y las zonas en el encabezado.
A partir de 80rem: el Ancla a la derecha.
Pantallas grandes: todo se detiene a los 90rem y permanece centrado; el contenido, a los 46rem.

Reglas de Contenido

Un solo h1, el title.
Cada sección comienza con un h2 y tiene un id; las subsecciones usan h3, también con un id. Sin un id, permanecen fuera del Ancla.
Los ejemplos van en un Example, con su código.
Nada fuera de las zonas: una barra extra en el encabezado, un aviso fijado a una esquina.

Código

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>

El HTML que produce

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 página de Botón está construida con esta plantilla.