Menu do botão direito

O menu de ações que aparece onde a pessoa clicou. É o mesmo menu suspenso — mesma marcação, mesmos itens, mesmo teclado —, só que aberto pelo botão direito e ancorado no ponto do clique. Numa lista, os itens costumam mudar conforme a linha: por isso items também aceita uma função.

Como usar

A área é quem escuta o botão direito; match diz qual pedaço dela é o alvo. O alvo vai para items, e é dele que saem as ações daquela linha.

new Tucano.ContextMenu('#contratos', {
  match: 'tbody tr',
  items: (row) => [
    { label: row.dataset.name },
    { text: 'Editar', shortcut: '⌘E', onClick: () => editar(row.dataset.id) },
    { text: 'Duplicar', onClick: () => duplicar(row.dataset.id) },
    { separator: true },
    { text: 'Excluir', variant: 'danger', onClick: () => excluir(row.dataset.id) },
  ],
});

Sem match, o alvo é a área inteira — o caminho para um cartão ou um painel com um menu só. Fora de um alvo, o menu do navegador continua aparecendo: um menu de ações que não sabe sobre o que age é pior que nenhum.

Exemplos

<table id="contratos" data-tuc-contextmenu="#acoes-linha" data-match="tbody tr">
  {% for obj in page_obj %}
    <tr tabindex="0" data-id="{{ obj.pk }}">…</tr>
  {% endfor %}
</table>

<div class="tuc-dropdown" id="acoes-linha" hidden>
  <button type="button" class="tuc-dropdown__item">
    <span class="tuc-dropdown__text">Editar</span>
  </button>
</div>

Com o painel do template, os itens são os mesmos para toda linha: quem precisa saber qual foi clicada lê menu.target dentro do onclick, ou usa items como função.

Teclado e acessibilidade

O painel é o mesmo do menu suspenso: role="menu", itens como menuitem, foco dentro do menu e devolvido a quem o tinha antes. Aberto pelo botão direito, nenhum item nasce destacado — como no menu do sistema, a primeira seta é que destaca o primeiro. Aberto pelo teclado, o primeiro item já vem destacado, porque quem apertou a tecla de menu já quer andar pelos itens.

API

Gerada do código a cada build — se algo não está aqui, não existe.

Opções