ContextMenu

import { ContextMenu, type ContextMenuItem } from "@grassroot/ui-react";
 
const items: ContextMenuItem[] = [
  { label: "View logs", shortcut: "⌘L" },
  { divider: true },
  { label: "Tear down", shortcut: "⌘⌫", danger: true },
];
 
<ContextMenu items={items} header="ledger-api">
  <div>Right-click anywhere here</div>
</ContextMenu>

<script setup lang="ts">
import { ContextMenu } from "@grassroot/ui-vue";
 
const items: ContextMenuItem[] = [
  { label: "View logs", shortcut: "⌘L" },
  { divider: true },
  { label: "Tear down", shortcut: "⌘⌫", danger: true },
];
</script>
 
<template>
  <ContextMenu
    :items="items"
    header="ledger-api"
  >
    <div>Right-click anywhere here</div>
  </ContextMenu>
</template>

import { Component } from "@angular/core";
import { GrassrootContextMenu } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootContextMenu],
  template: `
    <grassroot-context-menu
      [items]="items"
      header="ledger-api"
    >
      <div>Right-click anywhere here</div>
    </grassroot-context-menu>
  `,
})
export class ExampleComponent {
  readonly items: ContextMenuItem[] = [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ];
}

<script lang="ts">
  import { ContextMenu } from "@grassroot/ui-svelte";
 
  const items: ContextMenuItem[] = [
    { label: "View logs", shortcut: "⌘L" },
    { divider: true },
    { label: "Tear down", shortcut: "⌘⌫", danger: true },
  ];
</script>
 
<ContextMenu
  items={items}
  header="ledger-api"
>
  <div>Right-click anywhere here</div>
</ContextMenu>

import { ContextMenu } from "@grassroot/ui-solid";
 
const items: ContextMenuItem[] = [
  { label: "View logs", shortcut: "⌘L" },
  { divider: true },
  { label: "Tear down", shortcut: "⌘⌫", danger: true },
];
 
export function Example() {
  return (
    <>
      <ContextMenu
        items={items}
        header="ledger-api"
      >
        <div>Right-click anywhere here</div>
      </ContextMenu>
    </>
  );
}