Menú desplegable

Menú de acciones anclado a un botón. Cambia de lado cuando no cabe, se cierra con un clic fuera, con Escape y cuando el foco sale, y se recorre con las flechas del teclado. Los ítems pueden venir escritos en la plantilla, que es el camino cuando es el servidor quien sabe lo que la persona puede hacer.

Ejemplos

El mismo componente, con posición y contenido distintos.

Las posiciones son las mismas del tooltip: lado top, bottom, left o right, y alineación start, center o end. La predeterminada es bottom-start. Cuando el lado pedido no cabe y el opuesto cabe mejor, el menú se da la vuelta; y nunca se sale de la pantalla, se desliza hacia dentro.

Cómo usar

Un botón con data-tuc-dropdown apuntando al panel, y el panel justo debajo, con hidden. Se inicializa solo, incluso lo que llegue después por HTMX.

<button type="button" class="tuc-btn is-outline" data-tuc-dropdown="#actions">Acciones</button>

<div class="tuc-dropdown" id="actions" hidden>
  <div class="tuc-dropdown__label">Contrato</div>
  <button type="button" class="tuc-dropdown__item">
    <span class="tuc-dropdown__text">Editar</span>
    <span class="tuc-dropdown__shortcut">⌘E</span>
  </button>
  <a class="tuc-dropdown__item" href="/contracts/12/">
    <span class="tuc-dropdown__text">Abrir</span>
  </a>
  <hr class="tuc-dropdown__separator">
  <button type="button" class="tuc-dropdown__item is-danger">
    <span class="tuc-dropdown__text">Eliminar</span>
  </button>
</div>

Piezas del panel

Un ítem con href es un <a> de verdad. El clic central sigue abriendo en otra pestaña, y el menú no le roba el menú contextual al navegador. Hacer clic en cualquier ítem cierra el menú.

En la plantilla de Django

Las acciones que dependen de permisos se quedan fuera en el servidor, y no escondidas en el navegador. En un listado, el id del panel lleva la clave de la fila para que cada menú apunte al suyo.

{% for contract in contracts %}
  <button type="button" class="tuc-btn is-outline is-icon is-sm" aria-label="Acciones"
          data-tuc-dropdown="#actions-{{ contract.pk }}" data-placement="bottom-end">...</button>

  <div class="tuc-dropdown" id="actions-{{ contract.pk }}" hidden>
    <a class="tuc-dropdown__item" href="{% url 'contract-edit' contract.pk %}">
      <span class="tuc-dropdown__text">Editar</span>
    </a>
    {% if perms.contracts.delete_contract %}
      <hr class="tuc-dropdown__separator">
      <a class="tuc-dropdown__item is-danger" href="{% url 'contract-delete' contract.pk %}">
        <span class="tuc-dropdown__text">Eliminar</span>
      </a>
    {% endif %}
  </div>
{% endfor %}

En JavaScript

Cuando los ítems se calculan en el momento. El componente monta el panel, y cada ítem recibe qué hacer al ser elegido.

const menu = new Tucano.Dropdown('#actions', {
  placement: 'bottom-end',
  items: [
    { label: 'Contrato' },
    { text: 'Editar', icon: 'M12 20h9M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4z', shortcut: '⌘E', onClick: () => editContract() },
    { text: 'Duplicar', icon: Tucano.ICON_COPY, onClick: (dropdown) => duplicateContract() },
    { text: 'Abrir', href: '/contracts/12/' },
    { text: 'Archivar', disabled: true },
    { separator: true },
    { text: 'Eliminar', variant: 'danger', onClick: () => deleteContract() },
  ],
});

menu.open();
menu.close();
menu.toggle();
menu.destroy();   // cierra y suelta los listeners

closeOnPick: false mantiene el menú abierto después de elegir, para ítems que activan y desactivan algo.

Teclado y accesibilidad

El disparador recibe aria-haspopup="menu" y aria-expanded, el panel es un menu y cada ítem un menuitem. Abrir lleva el foco hacia dentro, y cerrar lo devuelve al disparador.

Además de Escape, el menú se cierra con un clic fuera, cuando el foco va a otro lugar y cuando el disparador sale de la pantalla al desplazarse. El resaltado del ítem sigue al foco, y no solo al puntero: es la flecha la que mueve el foco, y sin eso quien usa el teclado no vería dónde está.

API

Generada a partir del código en cada build — si algo no está aquí, no existe.

Opciones

Las notas de esta tabla salen de los comentarios del código fuente, que están escritos en portugués.