Day 19 - Animate UI Pin List

前言

#

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

這次要聊的就是 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 物件可搭載參數

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

   屬性	型態	說明
   id	number	識別碼
   name	string	顯示名稱
   info	string	額外的資訊或描述
   iconName	IconName	項目圖示名稱，可參考 lucide-react-icons
   pinned	boolean	是否被釘選

   參數	參數型態	說明
   items	PinListItem[]	清單項目來源
   labels	{ pinned: string; unpinned: string }	清單區塊的標籤文字
   transition	object	清單動畫的過渡參數，有四個參數可調整：（stiffness 剛度 : number, damping 阻尼 : number, mass 質量 : number, type : 要使用的動畫類型，分為 tween：基於持續時間的動畫，帶有 ease curve 動畫；spring：基於物理或持續時間的彈簧動畫；false：使用即時動畫）。預設為 { stiffness: 320, damping: 20, mass: 0.8, type: 'spring' }
   labelMotionProps	object	標籤的動畫屬性（包含 initial、animate、exit、transition）
   className	string	自訂最外層容器的 CSS 類別，可參考 Tailwind CSS
   labelClassName	string	自訂標籤的 CSS 類別，可參考 Tailwind CSS
   pinnedSectionClassName	string	自訂「釘選項目」區塊的 CSS 類別，可參考 Tailwind CSS
   unpinnedSectionClassName	string	自訂「所有項目」區塊的 CSS 類別，可參考 Tailwind CSS
   zIndexResetDelay	number	在重新調整清單項目 z-index 前的延遲時間（毫秒），預設為 500。

小結

#

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

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

Reference

#

• Animate UI Pin List