Índice de páginas
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
- Cómo pedimos información
- Cómo mostramos información
- Ayudar a resolver
- Páginas y flujos
Grupo de acciones
Cómo mostramos información
Listado de acciones que puedes realizar sobre la página
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-paginas">
<h2 id="acciones-de-paginas" 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-paginas">
<h2 id="acciones-de-paginas" 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>
Cuándo lo utilizamos #
- Para construir el patrón de encabezado con acciones de página
- En aplicaciones con items para realizar acciones en lote
- En aplicaciones con tablas avanzadas para realizar acciones en lote
- Las acciones deben estar dentro de un elemento
<section>
y tener un encabezado con.sr-only
que las describa. - El grupo se maqueta como una lista
<ul>