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ódigodel ejemplo: includes/_pattern.acciones-de-pagina-boton-volver.njk
Contenido
Nunjucks macro
{% 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
<div class="my-base">
<!-- button -->
<a href="patrones.html" role="button" 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ódigodel ejemplo: includes/_pattern.acciones-de-pagina-primaria-secundaria-y-terciarias.njk
Contenido
Nunjucks macro
{% 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
<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 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">
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ódigodel ejemplo: includes/_pattern.acciones-de-pagina-siguiente-paso-y-restaurar.njk
Contenido
Nunjucks macro
{% 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
<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ódigodel ejemplo: includes/_pattern.acciones-de-pagina-buscar-en-el-sitio.njk
Contenido
Nunjucks macro
{% 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
<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ódigodel ejemplo: includes/_pattern.acciones-de-pagina-mostrar-filtros-y-ordenacion.njk
Contenido
Nunjucks macro
{% 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
<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" data-option="sub-filter-item" 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" data-option="sub-sub-filter-item">
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-2" data-option="sub-sub-filter-item-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" data-option="sub-sub-filter-item-4">
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" data-option="sub-filter-example-item-3" 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" data-option="sub-sub-filter-example-item-3">
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-2" data-option="sub-sub-filter-example-item-3-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" data-option="sub-sub-filter-example-item-3-3">
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" data-option="sub-sub-filter-example-item-3-5">
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" data-option="sub-sub-filter-example-item-3-7">
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" data-option="sub-filter-example-item-4">
<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" data-option="sub-sub-filter-example-item-4">
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-2" data-option="sub-sub-filter-example-item-4-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-3" data-option="sub-sub-filter-example-item-4-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-4" data-option="sub-sub-filter-example-item-4-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ódigodel ejemplo: includes/_pattern.acciones-de-tabla.njk
Contenido
Nunjucks macro
{% 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
<!-- 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" data-option="sub-actions-table-item-3" 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>