Context menu - Pharen

Use Context menu to show contextual content or user feedback. This page covers every Vue component exported by the public module.

View code

<script setup lang="ts">
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '@pharen/ui';
</script>

<template>
  <ContextMenu>
    <ContextMenuTrigger class="grid h-36 w-72 place-items-center rounded-xl border border-dashed bg-muted/30 text-sm text-muted-foreground">
      Right-click this workspace
    </ContextMenuTrigger>
    <ContextMenuContent class="w-52">
      <ContextMenuLabel>Workspace</ContextMenuLabel>
      <ContextMenuSeparator />
      <ContextMenuItem>Rename<ContextMenuShortcut>F2</ContextMenuShortcut></ContextMenuItem>
      <ContextMenuItem>Duplicate<ContextMenuShortcut>⌘D</ContextMenuShortcut></ContextMenuItem>
      <ContextMenuItem class="text-destructive">Delete</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

Installation

npm install @pharen/ui

pnpm add @pharen/ui

yarn add @pharen/ui

bun add @pharen/ui

Import @pharen/ui/styles.css exactly once in your application entrypoint.

Usage

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '@pharen/ui';

Exports

Export	Purpose
`ContextMenu`	Exported Vue component from this module.
`ContextMenuCheckboxItem`	Represents one item.
`ContextMenuContent`	Contains the visible content.
`ContextMenuGroup`	Groups related items.
`ContextMenuItem`	Represents one item.
`ContextMenuLabel`	Labels a value or region.
`ContextMenuPortal`	Exported Vue component from this module.
`ContextMenuRadioGroup`	Groups related items.
`ContextMenuRadioItem`	Represents one item.
`ContextMenuSeparator`	Separates adjacent regions.
`ContextMenuShortcut`	Exported Vue component from this module.
`ContextMenuSub`	Exported Vue component from this module.
`ContextMenuSubContent`	Contains the visible content.
`ContextMenuSubTrigger`	Opens or activates the component.
`ContextMenuTrigger`	Opens or activates the component.

Source

Open the source on GitHub