DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Barra de progreso

Ayudar a navegar y encontrar

Divide el formulario en pasos más pequeños y permite navegar entre ellos.

Variantes

Tamaño base

Mostrar código del ejemplo: includes/_pattern.formularios-barra-progreso.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-barra-progreso.njk

<nav aria-label="Cronología de pasos del formulario">
  <ol class="flex lg:flex-row flex-col items-start lg:mx-xl mx-sm">
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button flex justify-center" href="#"><span class="text-2xl">1</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 c-link font-normal lg:text-center text-start w-40">Paso anterior</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-primary-base lg:grow lg:my-6 h-lg lg:-mx-lg ml-5 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--primary flex justify-center" href="#" aria-current="page"><span class="text-2xl">2</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 c-link font-bold lg:text-center text-start w-40">Paso actual</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-neutral-light lg:grow lg:my-6 h-lg lg:-mx-lg ml-5 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible bg-white lg:w-12">
        <a class="aspect-square rounded-full c-button c-button--disabled disabled flex justify-center" href="#" aria-disabled="true" tabindex="-1"><span class="text-2xl">3</span><span class="sr-only">-</span><span class="absolute lg:top-14 lg:ml-0 ml-60 text-neutral-dark font-normal lg:text-center text-start w-40">Paso posterior</span></a>
      </div>
    </li>
  </ol>
</nav>

Tamaño pequeño

Mostrar código del ejemplo: includes/_pattern.formularios-barra-progreso-sm.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.formularios-barra-progreso-sm.njk

<nav aria-label="Cronología de pasos del formulario">
  <ol class="flex lg:flex-row flex-col items-start lg:mx-xl mx-xs">
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--sm flex justify-center" href="#"><span>1</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 c-link text-sm font-normal lg:text-center text-start w-40">Paso anterior</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-primary-base lg:grow lg:my-3.5 h-lg lg:-mx-base ml-3 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible">
        <a class="aspect-square rounded-full c-button c-button--primary c-button--sm flex justify-center" href="#" aria-current="page"><span>2</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 c-link text-sm font-bold lg:text-center text-start w-40">Paso actual</span></a>
      </div>
    </li>
    <li class="lg:border-t-4 lg:border-l-0 border-l-4 border-neutral-light lg:grow lg:my-3.5 h-lg lg:-mx-base ml-3 overflow-hidden" role="separator" aria-hidden="true"></li>
    <li>
      <div class="relative flex flex-col items-center overflow-visible bg-white">
        <a class="aspect-square rounded-full c-button c-button--sm c-button--disabled disabled flex justify-center" href="#" aria-disabled="true" tabindex="-1"><span>3</span><span class="sr-only">-</span><span class="absolute lg:top-10 lg:ml-0 ml-52 text-neutral-dark text-sm font-normal lg:text-center text-start w-40">Paso posterior</span></a>
      </div>
    </li>
  </ol>
</nav>

Cuándo lo utilizamos

  • Cuando la persona tenga que realizar una serie de pasos para completar una tarea o formulario.

Ubicación

  • En horizontal al principio de la página
  • En vertical como menú de navegación lateral
  • En vertical si no es posible encajarlo en anchuras pequeñas y no es posible apilarlo en varias líneas

Qué debes tener en cuenta

  • Los elementos se encuentran maquetados como items de un listado <ul>, dentro de un elemento <nav> con un aria-label que lo describe.
  • Indica los pasos anteriores con el estilo de botón por defecto.
  • Indica el paso actual con el estilo de botón primario, un enlace con peso .text-bold y el atributo aria-current="page".
  • Indica los pasos posteriores con el estilo de botón por defecto desactivado y los atributos aria-disabled="true" y tabindex="-1".
  • Las líneas de unión son items del listado con los atributos role="separator" y aria-hidden="true". Las líneas anteriores al paso actual tienen el color .primary-base y las posteriores .neutral-light.