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

## 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](/es/components/button/) está construida con esta plantilla.