DESY

Sistema de Diseño del Gobierno de Aragón

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>

Cuándo lo utilizamos