cosmemilton-ui/clientAcoes & navegacao

CmContextMenu

Use para acoes secundarias sobre cards, linhas de tabela e itens de arvore.

Import

tsx
import { CmContextMenu } from "cosmemilton-ui/client";

Acoes por contexto

Clique com botao direito

Pedido #1048

Abra o menu contextual para ver as acoes.

tsx
"use client";

import { CmContextMenu } from "cosmemilton-ui/client";
import { CmBadge, CmCard, CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  return (
    <CmContextMenu
      target={
        <CmCard padding="lg" interactive>
          <CmStack gap="xs">
            <CmBadge tone="primary">Clique com botao direito</CmBadge>
            <CmText weight="semibold">Pedido #1048</CmText>
            <CmText tone="muted">Abra o menu contextual para ver as acoes.</CmText>
          </CmStack>
        </CmCard>
      }
      items={[
        { id: "open", label: "Abrir pedido" },
        { id: "duplicate", label: "Duplicar" },
        { id: "cancel", label: "Cancelar", disabled: true },
      ]}
    />
  );
}

API rapida

CmContextMenu

targetitemsclassName