Day 14 - Shadcn UI Context Menu

前言

#

講到 Cursor，不禁還是會想到與他一起搭配的 Context Menu。而這個在 Animate UI 中是沒有內建的，因此今天想要來介紹 Shadcn UI Context Menu。透過游標觸發互動式選單，可以讓使用者在電腦有滑鼠操作時，可以更快存取到相對應的功能。

Context Menu

#

可以看到 GIF 中在框框內點選右鍵時，會觸發到我們所設定的 Context Menu，而在範圍外的其他部分則是瀏覽器內建的 Context Menu。在範例中我有加上 Shadcn UI - Sonner，其實有點像是 Banner，讓點擊時觸發動作可以更明顯，有需要可以參考官網中說明。

1. 使用 Shadcn CLI 加入 Context Menu

   npx shadcn@latest add context-menu
   

2. Import 元件並將元件放在想要的位置上

   import {
       ContextMenu,
       ContextMenuContent,
       ContextMenuItem,
       ContextMenuTrigger,
   } from "@/components/ui/context-menu"
   

   <ContextMenu>
       <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
           按下滑鼠右鍵
       </ContextMenuTrigger>
       <ContextMenuContent>
           <ContextMenuItem onClick={() => toast.success("訂閱成功！")}>訂閱 Animate UI</ContextMenuItem>
           <ContextMenuItem onClick={() => toast.info("感謝您的訂閱")}>系列教學文</ContextMenuItem>
           <ContextMenuItem onClick={() => toast("不會錯過任何更新")}>才不會錯過</ContextMenuItem>
           <ContextMenuItem onClick={() => toast("新文章發布時會通知您")}>任何新文章</ContextMenuItem>
       </ContextMenuContent>
   </ContextMenu>
   

   若沒有需要 onClick 可以將其刪除。

3. 若還有想要微調，可以增加更多參數

   啊 抱歉這篇沒有東西可以調整🙂‍↕️ 將 Context Menu 內做的更為精細吧🎉

   ---

   補充一點，若想要使用 Sonner or Toast，需注意要加上

   "use client"
   

   否則會出現 Server Component 中不能直接使用客戶端的互動功能。

   

小結

#

這篇文章中，我們認識 Shadcn UI 的 Context Menu，了解它如何被觸發（滑鼠右鍵），而這個 Context Menu 與之前我們談過的 Animate UI Cursor 可以很好地結合：你可以讓游標（Cursor）在滑點擊時，觸發 Context Menu 的出現。這樣一來，使用者在與選單互動時，不只是選單自己動態，而是整個操作流程（從游標、觸發到選單）都會更連貫，也更具沉浸感。

Reference

#

• Shadcn UI Docs