DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Filtrar

Ayudar a navegar y encontrar

Mostrar opciones de ordenación y búsqueda

Variantes

Este patrón contiene includes. Puedes buscarlos en el repositorio de Bitbucket y copiar el código

Ordenación

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({
      "id": "filtros-y-ordenacion-toggle",
      "classes": "c-button c-button--sm mb-base",
      "offState": {
        "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>

Búsqueda

Filtros y busqueda

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

Contenido

Nunjucks macro del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-busqueda.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-busqueda">
  <h2 class="sr-only" id="filtros-y-busqueda">Filtros y busqueda</h2>
  <div class="pt-base lg:pt-0 lg:flex-1">
    {{ componentToggle({
      "id": "filtros-y-busqueda-toggle",
      "classes": "c-button mb-base",
      "offState": {
        "classes": "",
        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 1.7142857142857142c-3.1559085714285713 0 -5.7142857142857135 2.5583771428571427 -5.7142857142857135 5.7142857142857135s2.5583771428571427 5.7142857142857135 5.7142857142857135 5.7142857142857135 5.7142857142857135 -2.5583771428571427 5.7142857142857135 -5.7142857142857135 -2.5583771428571427 -5.7142857142857135 -5.7142857142857135 -5.7142857142857135ZM0 7.428571428571428C0 3.3258857142857137 3.3258857142857137 0 7.428571428571428 0 11.531314285714284 0 14.857142857142856 3.3258857142857137 14.857142857142856 7.428571428571428c0 1.6389714285714283 -0.5307428571428571 3.1539771428571424 -1.4298285714285714 4.382514285714286l2.2381714285714285 2.2381714285714285c0.44639999999999996 0.4462857142857143 0.44639999999999996 1.1699428571428572 0 1.6162285714285711 -0.4462857142857143 0.4462857142857143 -1.1698285714285714 0.4462857142857143 -1.6162285714285711 0l-2.2381714285714285 -2.2381714285714285C10.58256 14.3264 9.067542857142856 14.857142857142856 7.428571428571428 14.857142857142856 3.3258857142857137 14.857142857142856 0 11.531314285714284 0 7.428571428571428Zm7.428571428571428 -3.714285714285714c0.47338285714285716 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571v2H10.285714285714285c0.47338285714285716 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38375999999999993 0.8571428571428571 -0.8571428571428571 0.8571428571428571H8.285714285714285V10.285714285714285c0 0.47338285714285716 -0.38375999999999993 0.8571428571428571 -0.8571428571428571 0.8571428571428571s-0.8571428571428571 -0.38375999999999993 -0.8571428571428571 -0.8571428571428571V8.285714285714285H4.571428571428571c-0.47338285714285716 0 -0.8571428571428571 -0.38375999999999993 -0.8571428571428571 -0.8571428571428571s0.38375999999999993 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2V4.571428571428571c0 -0.47338285714285716 0.38375999999999993 -0.8571428571428571 0.8571428571428571 -0.8571428571428571Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>Buscar y filtrar</span>'
      },
      "onState": {
        "classes": "c-button--has-selection",
        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 1.7142857142857142c-3.1559085714285713 0 -5.7142857142857135 2.5583771428571427 -5.7142857142857135 5.7142857142857135s2.5583771428571427 5.7142857142857135 5.7142857142857135 5.7142857142857135 5.7142857142857135 -2.5583771428571427 5.7142857142857135 -5.7142857142857135 -2.5583771428571427 -5.7142857142857135 -5.7142857142857135 -5.7142857142857135ZM0 7.428571428571428C0 3.3258857142857137 3.3258857142857137 0 7.428571428571428 0 11.531314285714284 0 14.857142857142856 3.3258857142857137 14.857142857142856 7.428571428571428c0 1.6389714285714283 -0.5307428571428571 3.1539771428571424 -1.4298285714285714 4.382514285714286l2.2381714285714285 2.2381714285714285c0.44639999999999996 0.4462857142857143 0.44639999999999996 1.1699428571428572 0 1.6162285714285711 -0.4462857142857143 0.4462857142857143 -1.1698285714285714 0.4462857142857143 -1.6162285714285711 0l-2.2381714285714285 -2.2381714285714285C10.58256 14.3264 9.067542857142856 14.857142857142856 7.428571428571428 14.857142857142856 3.3258857142857137 14.857142857142856 0 11.531314285714284 0 7.428571428571428Zm4.571428571428571 -0.8571428571428571c-0.47338285714285716 0 -0.8571428571428571 0.38375999999999993 -0.8571428571428571 0.8571428571428571s0.38375999999999993 0.8571428571428571 0.8571428571428571 0.8571428571428571h5.7142857142857135c0.47338285714285716 0 0.8571428571428571 -0.38375999999999993 0.8571428571428571 -0.8571428571428571s-0.38375999999999993 -0.8571428571428571 -0.8571428571428571 -0.8571428571428571H4.571428571428571Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>Buscar y filtrar</span>'
      },
      "attributes": {
        "aria-controls": "id-panel-filtros-2",
        "onclick": "toggleFilter2();"
      }
    }) }}
    <div class="hidden" id="id-panel-filtros-2" data-module="panel-filtros-2">
      {% include "includes/_pattern.menubar-filtro-busqueda.njk"%}
    </div>
    <script>
      function toggleFilter2() {
        var elements = document.querySelectorAll('[data-module="panel-filtros-2"]');
        for (var i = 0; i < elements.length; i++) {
          elements[i].classList.toggle('hidden')
        }
      }
    </script>
  </div>
</section>

Avanzados

Recuerda

No puedes utilizar el NIF para buscar personas funcionarias. En cambio, sí puedes hacerlo en el caso de la ciudadanía

Filtros avanzados

Filtros
Filtrar items de la lista
Mostrar código del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-avanzados.njk

Contenido

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

{% from "components/details/_macro.details.njk" import componentDetails %}
{% from "components/input/_macro.input.njk" import componentInput %}
{% from "components/select/_macro.select.njk" import componentSelect %}
{% from "components/button/_macro.button.njk" import componentButton %}



<section class="w-full mb-sm" aria-labelledby="filtros-avanzados">
  <h2 class="sr-only" id="filtros-avanzados">Filtros avanzados</h2>
  {% call componentDetails({
    "summary": {
      "html": "Filtros"
    }
  }) %}

  <form class="bg-neutral-lighter p-xl mt-base">
    <fieldset class="grid lg:grid-cols-3 gap-y-0 gap-lg mb-base">
      <legend class="sr-only">Filtrar items de la lista</legend>
      {{ componentInput({
        "label": {
          "text": "Nombre"
        },
        "id": "input-nombre",
        "name": "nombre",
        "type": "search",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Primer apellido"
        },
        "id": "input-primer-apellido",
        "name": "primer-apellido",
        "type": "search",
        "classes": "w-full"
      })  }}
      {{ componentInput({
        "label": {
          "text": "Segundo apellido"
        },
        "id": "input-segundo-apellido",
        "name": "segundo-apellido",
        "type": "search",
        "classes": "w-full"
      })  }}
      {{ componentSelect({
        "id": "select-tipo",
        "name": "select-tipo",
        "classes": "w-full",
        "label": {
          "text": "Tipo de rol"
        },
        "items": [
          {
            "value": "",
            "text": "Selecciona una opción",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }) }}
      {{ componentSelect({
        "id": "select-estado",
        "name": "select-estado",
        "classes": "w-full",
        "label": {
          "text": "Estado"
        },
        "items": [
          {
            "value": "",
            "text": "Selecciona una opción",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }) }}
    </fieldset>

    <ul class="flex gap-base" aria-label="Acciones de filtrado">
      <li>
        {{ componentButton({
          "type": "submit",
          "text": "Aplicar filtros",
          "classes": "c-button--primary"
        }) }}
      </li>
      <li>
        {{ componentButton({
          "text": "Eliminar filtros",
          "classes": "c-button--transparent"
        }) }}
      </li>
    </ul>

  </form>

  {% endcall  %}

</section>

Cuándo lo utilizamos

Qué componentes utilizamos

Accesibilidad

  • Los filtros deben estar contenidos en un campo <section> con <aria-label> o <aria-labelledby> que describa el grupo de elementos.
  • Si los filtros realizan cambios en la página automáticamente necesitarás una barra de menús con la variable ariaLabel.
  • Cuando necesitas aplicar varios filtros a través de un botón, éste debe llevar type=submit y estar contenidos en un elemento <form>. Además, los campos deben estar contenidos en un <fieldset> con su propio <legend>