Pular para o conteúdo

Componentes

DropdownMenu

Menu de vidro no desktop; folha de papel no celular. Item 34 (40 no toque), perigo em tinta rosa. Nunca é navegação e nunca é filtro.

betaDiálogodesde 0.2.0@hiboupay/react

Exemplos#

Vidro, 34px, perigo no fim

Mesa

Celular · 390

Folha no celular · popover na mesa

Importar#

tsx
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@hiboupay/react";
import type { DropdownMenuItemProps } from "@hiboupay/react";

Quando usar#

Use quando

  • Ações secundárias de uma linha ou de um botão ícone.
  • Exportar, atribuir, abrir detalhe, excluir (este último abre ConfirmGate).

Não use quando

  • Filtrar lista: FilterChip.
  • Navegar entre páginas: links.
  • Formulário: Select.

Variantes#

popover (md+)

Vidro com pálpebra, alinhado ao gatilho.

folha (< md)

Papel que sobe, a mesma gramática do Modal. Itens com altura de controle.

Anatomia#

  1. 01Trigger (quase sempre Button)
  2. 02Popover hb-glass + hb-lens a partir de md
  3. 03Folha hb-sheet com scrim abaixo de md
  4. 04Label mono
  5. 05Item com ícone opcional e hint mono
  6. 06Separador
  7. 07Item com marca (check ou rádio)

Estados#

fechado (120ms)aberto (pálpebra, 280ms)folha abertahighlighted (papel 80%)disableddanger

API#

Props documentadas no registro. * indica obrigatória.

Propriedades
PropTipoPadrãoDescrição
DropdownMenu.open / onOpenChangeboolean / (open) => voidControlado. Base Radix.
DropdownMenuContent.align"start" | "center" | "end""end"Alinhamento do popover. A folha ignora e ocupa a largura.
DropdownMenuItem.iconReactNodeÍcone de 16 em muted, à esquerda. Não decore todo item.
DropdownMenuItem.tone"default" | "danger""default"Perigo em danger-ink. Quase sempre abre ConfirmGate.
DropdownMenuItem.hintstringAtalho ou metadado em mono à direita.
DropdownMenuCheckboxItem.checkedbooleanMarca da família ChoiceMark.

Acessibilidade#

Teclado

EnterEspaçoAbre.
↑ ↓Percorre itens.
HomeEndPrimeiro e último item.
EnterAtiva o item.
EscFecha.

Leitor de tela

  1. —menu / menuitem (Radix). Item perigoso precisa de rótulo que diga a ação.

Boas práticas#

Faça

  • Uma ação por item, verbo no infinitivo.
  • Excluir no fim, separado, tone danger.

Evite

  • Menu com 15 itens. Quebre ou use Command no app.
  • Ícones decorativos em todo item.

Conteúdo#

  1. —"Exportar CSV", "Atribuir responsável", "Excluir cobrança".

Tokens#

Os tokens que desenham este componente. Clique para ver valor, variável e classe.

radius.lgradius.xlglass.base.blurcolor.dangerInkcontrol.mdmotion.calm

Relacionados#

Ação

Button

Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.

Entrada

FilterChip

Chip de filtro: rótulo + valor, popover de vidro. Ativo vira papel com anel azul e ganha X para limpar.

Diálogo

Tooltip

Chip Graffiti com seta, 12px, atraso de 400ms. Entra só por opacidade. Explica o que já está na tela. Nunca carrega a regra.

Diálogo

ConfirmGate

Gate para ações irreversíveis: dinheiro, permissão, exclusão, execução de agente. Pode exigir motivo e palavra digitada.