前言

每個人電腦桌面上，或是瀏覽器分頁列裡，都有那種「捨不得關、卻又亂七八糟堆一堆」的東西吧？😂 有些是待辦清單、有些是靈感筆記，還有些是「一定要看」但最後都吃灰的連結。這時候如果能有個工具幫你把重點標記起來，不就是超讚的救星嗎？

這次要聊的就是 Animate UI Community – Pin List。顧名思義，它就像是把你最重要的東西「釘」在眼前，不會被其他雜事淹沒。更棒的是，還能透過動畫讓清單看起來更直覺、更有活力，讓「釘東西」這件小事，變得不再無聊。📌✨

Pin List

1. 使用 Shadcn CLI 加入 Pin List

   npx shadcn@latest add @animate-ui/components-community-pin-list
   

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

   import { PinList } from '@/components/animate-ui/components/community/pin-list';
   

   const ITEMS: PinListItem[] = [
       {
           id: 1,
           name: '代碼小站',
           info: '程式更新 · 晚上 9 點關門',
           iconName: 'GitCommit',
           pinned: true,
       } as const,
       {
           id: 2,
           name: '除錯咖啡',
           info: '修復錯誤 · 24 小時營業',
           iconName: 'AlertTriangle',
           pinned: true,
       } as const,
       {
           id: 3,
           name: '套件商店',
           info: '安裝套件 · 晚上 8 點關門',
           iconName: 'Box',
           pinned: false,
       } as const,
       {
           id: 4,
           name: '密鑰保管',
           info: '登入相關 · 24 小時營業',
           iconName: 'KeyRound',
           pinned: false,
       } as const,
       {
           id: 5,
           name: '正則茶館',
           info: '搜尋字串 · 晚上 9 點關門',
           iconName: 'Regex',
           pinned: false,
       } as const,
   ];
   

   請注意引用 Icon 的圖示來源

   <PinList items={ITEMS} />
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   Pin List Item 物件可搭載參數

   type PinListItem = {
   id: number;
   name: string;
   info: string;
   iconName: IconName;
   pinned: boolean;
   };
   

Pin List 參數

小結

今天帶大家認識 Animate UI 的 Pin List 元件，它就像一個調皮的小夥伴，幫你把「重要的東西」釘起來，並在拖拉切換時還帶有流暢動畫，好像物件們自己在跳舞一樣 ✨

雖然它只是個清單的樣式，但有了 Pin List，原本凌亂的資料就能重組、分類，下次想讓清單更有趣、更有韻律，就讓這個元件來幫你奏樂吧 🎶

Reference

• Animate UI Pin List