Day 17 - Animate UI Management Bar

前言

#

今天要來介紹的也是 Animate UI Community 所提供的元件 —— Management Bar。它是一個結合分頁、操作按鈕與主要行動提示的管理工具列，讓項目處理更有效率。

Management Bar

#

1. 使用 Shadcn CLI 加入 Management Bar

   npx shadcn@latest add @animate-ui/components-community-management-bar
   

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

   import { ManagementBar } from '@/components/animate-ui/components/community/management-bar';
   

   <ManagementBar />
   

3. 可以規劃要放在列表或資料表頂部 or 底部

小結

#

今天帶大家認識 Animate UI 的 Management Bar 元件，它就像是一個「小小控制中心」，把 分頁、操作按鈕都收進一條簡潔的管理列裡，讓清單操作不再散亂。範例裡雖然用了 Blacklist、Block、Hire，但其實你可以自由發揮，放上自己需要的功能。試著玩一玩，說不定會意外發現管理列能讓介面變得更直覺、更好用喔！

Reference

#

• Animate UI Management Bar