前言 #
每天打開電腦、手機，第一眼迎接你的往往不是可愛的貓咪桌布，而是一堆通知叮叮咚咚的跳出來：訊息、提醒、優惠通知、甚至還有「你已經三天沒運動了」的健康警告。通知無處不在，但如果能用一個好看又好整理的方式呈現，這些「小小打擾」或許就能變成「貼心提醒」🤗
今天要介紹的 Animate UI Community – Notification List，正是把通知整理得有條有理、還帶點動畫趣味的元件，讓你的使用者面對通知時，不再只是點掉，而是忍不住多看一眼。 🎉
Notification List #
-
使用 Shadcn CLI 加入 Notification List
npx shadcn@latest add @animate-ui/components-community-notification-list -
Import 元件並將元件放在想要的位置上
import { NotificationList } from '@/components/animate-ui/components/community/notification-list';<NotificationList /> -
可以選擇要放在 Navigation Bar (如一開始 GIF Demo) 或者從側邊皆可～
小結 #
今天我們一起逛了 Animate UI 的 Notification List，簡直就像網頁世界裡的「小郵差」📬，專門幫你把各種通知排排站好，還順便幫它們換上帥氣的動畫衣服。
雖然只是通知，但有了這個元件，整個介面看起來就更有質感、不會再像滿桌便條紙一樣亂糟糟。下次想讓通知變得有禮貌、又帶點小驚喜時，不妨試試 Notification List 吧！✨