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.
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>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk
<div class="my-base">
<!-- button -->
<a href="patrones.html" draggable="false" class="c-button c-button--transparent">
<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
</a>
<!-- /button -->
</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>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-primaria-secundaria-y-terciarias.njk
<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>
<!-- button -->
<button class="c-button c-button--primary">
Acción primaria
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button">
Acción secundaria
</button>
<!-- /button -->
</li>
<li>
<!-- dropdown -->
<div data-module="c-dropdown" class=" relative">
<button class="c-dropdown" data-module="c-dropdown-button" aria-haspopup="true">
<span class="inline-flex self-center max-w-xs align-middle truncate">Más acciones</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></button>
<div class="-ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-dropdown-tooltip">
<!-- nav -->
<ul data-module="c-nav" class="text-sm w-max max-w-64" aria-label="Más acciones">
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-1">
Acción terciaria 1
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-2">
Acción terciaria 2
</a>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-3">
Acción terciaria 3
</a>
</li>
<li class="my-sm border-b border-neutral-base" aria-hidden="true">
<div class="sr-only">Separador</div>
</li>
<li>
<a href="#" class="flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" id="mas-acciones-de-pagina-4">
Otras acciones...
</a>
</li>
</ul>
<!-- /nav -->
</div>
</div>
<!-- /dropdown -->
</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>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-restaurar.njk
<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>
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Siguiente paso
</button>
<!-- /button -->
</li>
<li>
<!-- button -->
<button class="c-button">
Restaurar
</button>
<!-- /button -->
</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>
HTML del ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk
<div class="lg:w-1/2">
<h2 class="sr-only">Búsqueda</h2>
<form action="#">
<!-- searchbar -->
<!-- label -->
<label class="block sr-only undefined" for="searchbar-home">Buscar</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-home" name="searchbar-home" type="search" placeholder="Introduce un término de búsqueda">
<!-- button -->
<button type="submit" class="c-button c-button--primary">
Buscar
</button>
<!-- /button -->
</div>
<!-- /searchbar -->
</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>
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" 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" aria-label="Filtrar items de la lista">
<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="Tipología" 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">
<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>
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 #}
HTML del ejemplo: includes/_pattern.acciones-de-tabla.njk
<!-- details -->
<details class=" mb-xs text-sm">
<summary class="py-sm cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black">
<span class="c-link">
Acerca de esta tabla
</span>
</summary>
<div class="py-sm">
<div>
<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>
</div>
</div>
</details>
<!-- /details -->
<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="#">
<!-- checkboxes -->
<div class="c-form-group">
<div class="c-checkboxes c-checkboxes--sm mt-sm -mb-xl ml-base" data-module="c-checkboxes">
<div class=" -mt-base c-checkboxes__conditional-hidden">
<div class="relative flex items-start py-base">
<div class="flex items-center mx-sm">
<input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="todos-items" name="todos-items" type="checkbox" value="todas" aria-describedby=" ">
</div>
<div class="pt-0.5 leading-5">
<!-- label -->
<label class="block text-sm -mt-1" for="todos-items">Seleccionar todo</label>
<!-- /label -->
</div>
</div>
</div>
</div>
</div>
<!-- /checkboxes -->
</form>
</div>
<div class="flex lg:items-start lg:ml-auto lg:pl-base order-first lg:order-last">
<!-- menubar -->
<div id="actions-table-menubar" class="c-menubar" aria-label="Acciones de la tabla">
<ul data-module="c-menubar" id="actions-table-menubar-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="Acciones sobre los items seleccionados de la tabla">
<li class="relative" role="none">
<a role="menuitem" id="actions-table-item-1" href="#" class="c-menubar__button c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm">
Importar items
</a>
</li>
<li class="relative" role="none">
<a role="menuitem" id="actions-table-item-2" href="#" class="c-menubar__button c-menubar__button--sm mb-sm mr-sm">
Aceptar
</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 mr-sm" id="actions-table-item-3">
<span class="inline-flex self-center max-w-xs align-middle truncate">Reenviar</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="Reenviar items seleccionados" aria-labelledby="actions-table-item-3">
<li role="menuitem" id="sub-actions-table-item-3-1" data-option="sub-actions-table-item-3-1" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none">
A una bandeja personal
</li>
<li role="menuitem" id="sub-actions-table-item-3-2" data-option="sub-actions-table-item-3-2" class="flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none">
A un organismo
</li>
</ul>
</li>
</ul>
</div>
<!-- /menubar -->
</div>
</section>