Patrones Índice de páginas
Filtrar
Ayudar a navegar y encontrar
Mostrar opciones de ordenación
Variantes #
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>HTML del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-ordenacion.njk
<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">
<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
<!-- Button -->
<button
aria-expanded="false"
type="button"
class="c-toggle__button c-button c-button--sm mb-base"
id="filtros-y-ordenacion-toggle" aria-controls="id-panel-filtros" onclick="toggleFilter();">
<span class="c-button--is-not-pressed pointer-events-none"><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></span>
<span class="c-button--is-pressed hidden pointer-events-none"><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></span>
</button>
</div>
<!-- /toggle -->
<div class="hidden" id="id-panel-filtros" data-module="panel-filtros">
<!-- menubar -->
<div id="filter-items" class="c-menubar c-menubar--last-right">
<ul data-module="c-menubar" id="filter-items-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Filtrar items de la lista">
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm" id="filter-item">
<span class="inline-flex self-center max-w-xs align-middle truncate">Items y estados</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="" aria-labelledby="filter-item">
<li role="none">
<ul role="group" id="sub-filter-item-1" data-option="sub-filter-item-1" aria-label="Filtrar">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-1-1" data-option="sub-sub-filter-item-1-1">
Filtrar items
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-1-2" data-option="sub-sub-filter-item-1-2">
Filtrar subitems
</li>
</ul>
</li>
<li role="separator" id="sub-filter-item-2" class="my-sm border-b border-neutral-base">
</li>
<li role="none" id="sub-filter-item-3" data-option="sub-filter-item-3">
<span class="inline-block px-base py-sm text-neutral-dark focus:outline-none">Estados</span>
</li>
<li role="none">
<ul role="group" id="sub-filter-item-4" data-option="sub-filter-item-4" aria-label="Estados">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-1" data-option="sub-sub-filter-item-4-1">
Borrador
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-2" data-option="sub-sub-filter-item-4-2">
Borrador rechazado
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-3" data-option="sub-sub-filter-item-4-3">
En validación
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-4" data-option="sub-sub-filter-item-4-4">
Publicado
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-5" data-option="sub-sub-filter-item-4-5">
Con cambios
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-item-4-6" data-option="sub-sub-filter-item-4-6">
Dados de baja
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm" id="filter-example-item-3">
<span class="inline-flex self-center max-w-xs align-middle truncate">Tipología</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="" aria-labelledby="filter-example-item-3">
<li role="none">
<ul role="group" id="sub-filter-example-item-3-1" data-option="sub-filter-example-item-3-1" aria-label="Filtrar por procedimiento">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-1-1" data-option="sub-sub-filter-example-item-3-1-1">
Procedimiento
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-1-2" data-option="sub-sub-filter-example-item-3-1-2">
Servicio sin tramitación de procedimiento
</li>
</ul>
</li>
<li role="separator" id="sub-filter-example-item-3-2" class="my-sm border-b border-neutral-base">
</li>
<li role="none">
<ul role="group" id="sub-filter-example-item-3-3" data-option="sub-filter-example-item-3-3" aria-label="Filtrar por interno/externo">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-3-1" data-option="sub-sub-filter-example-item-3-3-1">
Interno
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-3-2" data-option="sub-sub-filter-example-item-3-3-2">
Externo
</li>
</ul>
</li>
<li role="separator" id="sub-filter-example-item-3-4" class="my-sm border-b border-neutral-base">
</li>
<li role="none">
<ul role="group" id="sub-filter-example-item-3-5" data-option="sub-filter-example-item-3-5" aria-label="Filtrar por común/específico">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5-1" data-option="sub-sub-filter-example-item-3-5-1">
Común, horizontal
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5-2" data-option="sub-sub-filter-example-item-3-5-2">
Específico, sectorial
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-5-3" data-option="sub-sub-filter-example-item-3-5-3">
Específico de uso común
</li>
</ul>
</li>
<li role="separator" id="sub-filter-example-item-3-6" class="my-sm border-b border-neutral-base">
</li>
<li role="none">
<ul role="group" id="sub-filter-example-item-3-7" data-option="sub-filter-example-item-3-7" aria-label="Filtrar por tipo de inicio">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-7-1" data-option="sub-sub-filter-example-item-3-7-1">
Inicio de oficio
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-7-2" data-option="sub-sub-filter-example-item-3-7-2">
Inicio a instancia
</li>
</ul>
</li>
<li role="separator" id="sub-filter-example-item-3-8" class="my-sm border-b border-neutral-base">
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-example-item-3-9" data-option="sub-filter-example-item-3-9">
Con convocatorias
</li>
<li role="separator" id="sub-filter-example-item-3-10" class="my-sm border-b border-neutral-base">
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-example-item-3-11" data-option="sub-filter-example-item-3-11">
Tramitación íntegra digital
</li>
</ul>
</li>
<li class="relative" role="none">
<a role="menuitem" id="filter-example-item-6" href="#" class="c-menubar__button c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm">
Eliminar filtros
</a>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm" id="filter-example-item-4">
<span class="inline-flex self-center max-w-xs align-middle truncate">Orden: Actividad reciente</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="Orden: Actividad reciente" aria-labelledby="filter-example-item-4">
<li role="none">
<ul role="group" id="sub-filter-example-item-4-1" data-option="sub-filter-example-item-4-1" aria-label="Cambiar ordenación">
<li role="menuitemradio" aria-checked="true" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-1-1" data-option="sub-sub-filter-example-item-4-1-1">
Actividad reciente
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-1-2" data-option="sub-sub-filter-example-item-4-1-2">
Publicación reciente
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-1-3" data-option="sub-sub-filter-example-item-4-1-3">
Creación reciente
</li>
<li role="menuitemradio" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-1-4" data-option="sub-sub-filter-example-item-4-1-4">
Número de item (de mayor a menor)
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /menubar -->
</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>HTML del ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-busqueda.njk
<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">
<!-- toggle -->
<div data-module="c-toggle" class="relative c-toggle">
<!-- Button -->
<button
aria-expanded="false"
type="button"
class="c-toggle__button c-button mb-base"
id="filtros-y-busqueda-toggle" aria-controls="id-panel-filtros-2" onclick="toggleFilter2();">
<span class="c-button--is-not-pressed pointer-events-none"><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></span>
<span class="c-button--is-pressed hidden pointer-events-none"><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></span>
</button>
</div>
<!-- /toggle -->
<div class="hidden" id="id-panel-filtros-2" data-module="panel-filtros-2">
<div class="mb-sm">
<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-filter-2">Buscar en esta página</label>
<!-- /label -->
<div class="relative flex flex-wrap items-end gap-sm">
<input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base flex-1" id="searchbar-filter-2" name="searchbar-filter-2" type="search" placeholder="Buscar documento o dato">
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Buscar
</button>
<!-- /button -->
</div>
<!-- /searchbar -->
</div>
<!-- menubar -->
<div id="filter-items-2" class="c-menubar">
<ul data-module="c-menubar" id="filter-items-2-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Filtrar items de la lista">
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm" id="filter-item-2">
<span class="inline-flex self-center max-w-xs align-middle truncate">Tipo</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="" aria-labelledby="filter-item-2">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-item-2-1" data-option="sub-filter-item-2-1">
Tipo 1
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-item-2-2" data-option="sub-filter-item-2-2">
Tipo 2
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-filter-item-2-3" data-option="sub-filter-item-2-3">
Tipo 3
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm" id="filter-example-item-3-2">
<span class="inline-flex self-center max-w-xs align-middle truncate">Fecha</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="">
<li role="none">
<ul role="group" id="sub-filter-example-item-3-2-1" data-option="sub-filter-example-item-3-2-1" aria-label="Filtrar por fecha">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-2-1-1" data-option="sub-sub-filter-example-item-3-2-1-1">
Fecha 1
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-2-1-2" data-option="sub-sub-filter-example-item-3-2-1-2">
Fecha 2
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-3-2-1-3" data-option="sub-sub-filter-example-item-3-2-1-3">
Fecha 3
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" role="none">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm" id="filter-example-item-4-2">
<span class="inline-flex self-center max-w-xs align-middle truncate">Otros</span>
<svg class="inline-block -mr-2 align-middle -my-px" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em">
<g>
<path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z" />
</g>
</svg></a>
<ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm" aria-label="">
<li role="none">
<ul role="group" id="sub-filter-example-item-4-2-1" data-option="sub-filter-example-item-4-2-1" aria-label="Filtrar por otros">
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-2-1-1" data-option="sub-sub-filter-example-item-4-2-1-1">
Otro 1
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-2-1-2" data-option="sub-sub-filter-example-item-4-2-1-2">
Otro 2
</li>
<li role="menuitemcheckbox" aria-checked="false" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white" id="sub-sub-filter-example-item-4-2-1-3" data-option="sub-sub-filter-example-item-4-2-1-3">
Otro 3
</li>
</ul>
</li>
</ul>
</li>
<li class="relative" role="none">
<a role="menuitem" id="filter-example-item-5-2" href="#" class="c-menubar__button c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm">
Eliminar filtros
</a>
</li>
</ul>
</div>
<!-- /menubar -->
</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>Cuándo lo utilizamos #
- Al principio de un largo listado de items