DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

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>

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>

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>

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>