DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Acciones de página

Los patrones de acciones pueden estar en cualquier lugar, pero es típico que aparezcan al principio o al final de las páginas.

Botón volver

Se usa cuando hemos llegado a una página desde una página anterior. Sirve para volver a esa página anterior.

Volver
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk

{% from "components/button/_macro.button.njk" import componentButton %}

<div class="my-base">
  {{ componentButton({
    "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z\" fill=\"currentColor\"></path></svg>Volver",
    "classes": "c-button--transparent",
    "href": "patrones.html"
  }) }}
</div>

Primaria, secundaria y terciarias

Es común que en una página una persona pueda realizar varias acciones. Si no necesitas alguna de las acciones, puedes copiar el código y borrar lo que no te interese.

Acciones de página

Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-primaria-secundaria-y-terciarias.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-primaria-secundaria-y-terciarias.njk

{% from "components/button/_macro.button.njk" import componentButton %}
{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
{% from "components/nav/_macro.nav.njk" import componentNav %}

<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina">
  <h2 id="acciones-de-pagina" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-column-reverse lg:flex-row-reverse flex-wrap gap-sm">
    <li>
      {{ componentButton({
      "text": "Acción primaria",
      "classes": "c-button--primary"
      })  }}
    </li>
    <li>
      {{ componentButton({
      "text": "Acción secundaria"
      })  }}
    </li>
    <li>
      {% call componentDropdown({
        "text": "Más acciones"
      })  %}
        {{ componentNav({
          "hasNav": false,
          "idPrefix": "mas-acciones-de-pagina",
          "items": [
            {
              "href": "#",
              "text": "Acción terciaria 1"
            },
            {
              "href": "#",
              "text": "Acción terciaria 2"
            },
            {
              "href": "#",
              "text": "Acción terciaria 3",
              "divider": true
            },
            {
              "href": "#",
              "text": "Otras acciones..."
            }
          ],
          "classes": "w-max max-w-64",
          "attributes": {
            "aria-label": "Más acciones"
          }
        })  }}
      {% endcall %}
    </li>
  </ul>
</section>

Siguiente paso y restaurar

En un proceso por pasos las acciones más habituales es continuar al siguiente paso o volver al paso anterior. 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>

Acciones de página

Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-restaurar.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-restaurar.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">
  <h2 id="acciones-de-pagina" 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": "Restaurar"
      })  }}
    </li>
  </ul>
</section>

Buscar en el sitio

Buscador general que suele aparecer en el encabezado de página para hacer una búsqueda general en el sitio. Limitamos la anchura para que no sea excesiva.

Búsqueda

Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk

{% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}

<div class="lg:w-1/2">
  <h2 class="sr-only">Búsqueda</h2>
  <form action="#">
    {{ componentSearchbar({
      "id": "searchbar-home",
      "label": {
        "text": "Buscar"
      },
      "placeholder": "Introduce un término de búsqueda",
      "button": {
        "text": "Buscar",
        "type": "submit",
        "classes": "c-button--primary"
      },
      "classes": "flex-1"
    }) }}
  </form>
</div>

Mostrar filtros y ordenación

Interruptor para mostrar u ocultar las opciones de ordenación de un listado posterior de items.

Filtros y ordenación

Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-ordenacion.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-ordenacion.njk

{% from "components/toggle/_macro.toggle.njk" import componentToggle %}

<section class="lg:flex lg:flex-wrap lg:w-full mb-sm" aria-labelledby="filtros-y-ordenacion">
  <h2 class="sr-only" id="filtros-y-ordenacion">Filtros y ordenación</h2>
  <div class="pt-base lg:pt-0 lg:flex-1">
    {{ componentToggle({
      "classes": "c-button c-button--sm mb-base",
      "offState": {
        "classes": "",
        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros y ordenación</span>'
      },
      "onState": {
        "classes": "c-button--has-selection",
        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros y ordenación</span>'
      },
      "attributes": {
        "aria-controls": "id-panel-filtros",
        "onclick": "toggleFilter();"
      }
    }) }}
    <div class="hidden" id="id-panel-filtros" data-module="panel-filtros">
      {% include "includes/_pattern.menubar-filtro-orden.njk"%}
    </div>
    <script>
      function toggleFilter() {
        var elements = document.querySelectorAll('[data-module="panel-filtros"]');
        for (var i = 0; i < elements.length; i++) {
          elements[i].classList.toggle('hidden')
        }
      }
    </script>
  </div>
</section>

Acciones de tabla

Detalles con información acerca de la tabla, para hacerla más accesible. Checkbox con opción de seleccionar todas las filas de la tabla y menubar de acciones en lote para esa selección.

Acerca de esta tabla

En la primera columna es posible seleccionar uno o más items pendientes. Puedes seleccionar todos los items pendientes con la casilla de verificación "Seleccionar todo".

La segunda columna contiene enlaces de acceso a los items.

Las cabeceras de columna tienen opción de ordenación.

Puedes realizar acciones sobre los items mediante los botones situados antes de la tabla.

Selección múltiple y Acciones sobre la tabla de items

Mostrar código del ejemplo: includes/_pattern.acciones-de-tabla.njk

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-tabla.njk

{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
{% from "components/details/_macro.details.njk" import componentDetails %}
{% from "components/menubar/_macro.menubar.njk" import componentMenubar %}

{# Instrucciones de funcionamiento de la tabla #}
{% call componentDetails({
  "summary": {
    "html": "Acerca de esta tabla"
  },
  "classes": "mb-xs text-sm"
})  %}
    <div id="descTable1">
      <p>En la primera columna es posible seleccionar uno o más items pendientes. Puedes seleccionar todos los items pendientes con la casilla de verificación "Seleccionar todo".</p>
      <p>La segunda columna contiene enlaces de acceso a los items.</p>
      <p>Las cabeceras de columna tienen opción de ordenación.</p>
      <p>Puedes realizar acciones sobre los items mediante los botones situados antes de la tabla.</p>
    </div>
{% endcall %}
{# Barra de Acciones #}
<section class="flex flex-col lg:flex-row lg:flex-wrap lg:w-full" aria-labelledby="acciones-items">
  <h3 id="acciones-items" class="sr-only">Selección múltiple y Acciones sobre la tabla de items</h3>
  <div class="lg:flex sm:flex-1">
    <form action="#">
      {{ componentCheckboxes({
        "idPrefix": "todos-items",
        "name": "todos-items",
        "classes": "c-checkboxes--sm mt-sm -mb-xl ml-base",
        "items": [
          {
            "value": "todas",
            "text": "Seleccionar todo",
            "classes": "-mt-base",
            "label": {
              "classes": "text-sm -mt-1"
            }
          }
        ]
      })  }}
    </form>
  </div>
  <div class="flex lg:items-start lg:ml-auto lg:pl-base order-first lg:order-last">
    {{ componentMenubar({
      "id": "actions-table-menubar",
      "idPrefix": "actions-table",
      "ariaLabel":"Acciones sobre los items seleccionados de la tabla",
      "items": [
        {
          "text": "Importar items",
          "ariaLabel": "Importar items",
          "id": "actions-table-item-1",
          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
          "href": "#"
        },
        {
          "text": "Aceptar",
          "ariaLabel": "Aceptar",
          "id": "actions-table-item-2",
          "classes": "c-menubar__button--sm mb-sm mr-sm",
          "href": "#"
        },
        {
          "text": "Reenviar",
          "ariaLabel": "Reenviar items seleccionados",
          "id": "actions-table-item-3",
          "classes": "c-menubar__button--sm mb-sm mr-sm",
          "sub": {
            "items": [
              {
                "role": "menuitem",
                "text": "A una bandeja personal"
              },
              {
                "role": "menuitem",
                "text": "A un organismo"
              }
            ],
            "attributes": {
              "aria-labelledby": "actions-table-item-3"
            }
          }
        }
      ],
      "attributes": {
        "aria-label": "Acciones de la tabla"
      }
    })  }}
  </div>
</section>
{# fin Barra de Acciones #}