DS | Adila.coComponentes
Dropdown Menu
Menu suspenso.
Instalação
bun add @adila-sh/uiUso
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from '@adila-sh/ui';
import { Button } from '@adila-sh/ui';
export function Example() {
return (
<DropdownMenu>
<DropdownMenuTrigger render={<Button>Menu</Button>} />
<DropdownMenuContent>
<DropdownMenuItem>Item</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}Labels de grupo
DropdownMenuLabel é um label semântico do essa biblioteca e deve estar sempre dentro de
DropdownMenuGroup ou DropdownMenuRadioGroup. Usá-lo diretamente em
DropdownMenuContent causa o erro #31 ao abrir o menu.
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Conta</DropdownMenuLabel>
<DropdownMenuItem>Perfil</DropdownMenuItem>
<DropdownMenuItem>Configurações</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>Eventos dos itens
Use onClick para executar uma ação ao selecionar um DropdownMenuItem. A prop
DOM onSelect representa seleção de texto e não é disparada pela ativação do item;
por isso, ela foi removida da tipagem do componente.
<DropdownMenuItem onClick={() => abrirProjeto(project.id)}>
Abrir projeto
</DropdownMenuItem>