Índice de páginas
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
Avanzar y retroceder
Ayudar a navegar y encontrar
Navegar entre un formulario con varios pasos.
Casos de uso
Siguiente paso y volver #
Junto a la cabecera #
En la parte superior de la página, junto a un encabezado en los patrones de títulos y encabezados.
Acciones de página
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk
{% from "components/button/_macro.button.njk" import componentButton %}
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col-reverse lg:flex-row-reverse flex-wrap gap-sm">
<li>
{{ componentButton({
"text": "Siguiente paso",
"classes": "c-button--primary",
"type": "submit"
}) }}
</li>
<li>
{{ componentButton({
"text": "Volver"
}) }}
</li>
</ul>
</section>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col-reverse lg:flex-row-reverse flex-wrap gap-sm">
<li>
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Siguiente paso
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button">
Volver
</button>
<!-- /button -->
</li>
</ul>
</section>
Bajo el formulario #
Seguido de los inputs de un formulario. Es la opción más habitual.
Acciones de página
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk
{% from "components/button/_macro.button.njk" import componentButton %}
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
<li>
{{ componentButton({
"text": "Volver"
}) }}
</li>
<li>
{{ componentButton({
"text": "Siguiente paso",
"classes": "c-button--primary",
"type": "submit"
}) }}
</li>
</ul>
</section>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
<li>
<!-- button -->
<button class="c-button">
Volver
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Siguiente paso
</button>
<!-- /button -->
</li>
</ul>
</section>
Siguiente paso y saltar #
Cuando un paso del formulario no es obligatorio, debemos ofrecer a la persona poder saltarlo y cumplimentarlo más tarde.
Acciones de página
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk
Contenido
Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk
{% from "components/button/_macro.button.njk" import componentButton %}
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
<li>
{{ componentButton({
"text": "Siguiente paso",
"classes": "c-button--primary",
"type": "submit"
}) }}
</li>
<li>
{{ componentButton({
"text": "Saltar",
"classes": "c-button--transparent"
}) }}
</li>
</ul>
</section>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
<h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
<ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
<li>
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Siguiente paso
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button c-button--transparent">
Saltar
</button>
<!-- /button -->
</li>
</ul>
</section>
Qué componentes utilizamos #
Qué debes tener en cuenta #
- Las acciones deben estar dentro de un elemento
<section>
y tener un encabezado con.sr-only
que las describa. - El grupo se maqueta como una lista
<ul>
- El botón primario es el que permite avanzar y se encuentra a la derecha. El botón volver es un botón por defecto a la izquierda. El botón de saltar es transparente y se coloca a la derecha.
- En anchuras pequeñas los botones se apilan.
- En caso de que el siguiente paso suponga el envío de un formulario, todo este patrón deberá estar contenido en una etiqueta
<form>