Live Glance Strip
即時動態資訊條：iOS Live Activity 語彙網頁化的毛玻璃膠囊，狀態文字上下翻轉更新、進度軌道即時推進，點擊展開詳細內容。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.6
<LiveGlanceStrip />
安裝
npx shadcn@latest add https://webberui.com/r/live-glance-strip.json或在 components.json 設定 registries 後，改用 @webberui/live-glance-strip 安裝。
安裝依賴後，開啟 live-glance-strip.json，將 files[0].content 的內容存成你的 components/ui/live-glance-strip.tsx：
npm install motion clsx tailwind-merge使用
import { LiveGlanceStrip } from "@/components/ui/live-glance-strip";
<LiveGlanceStrip
icon={<Rocket className="size-4" />}
title="正式環境部署"
status="編譯中" // 值變更時觸發翻轉
progress={0.6}
position="fixed-bottom" // 真實應用固定在視窗底部；文件預覽用 'inline'
>
{/* 展開後顯示的詳細內容 */}
<ul className="space-y-2 text-xs">
<li>安裝依賴 ✓</li>
<li>編譯與打包 …</li>
<li>部署至 Edge 節點</li>
</ul>
</LiveGlanceStrip>;受控展開：
const [open, setOpen] = React.useState(false);
<LiveGlanceStrip
title="正式環境部署"
status="部署中"
expanded={open}
onExpandedChange={setOpen}
>
…
</LiveGlanceStrip>;Props
LiveGlanceStrip
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
icon | React.ReactNode | — | 左側插槽內容（通常是圖示），會置於圓形底座中 |
title | string | — | 活動標題 |
status | string | — | 即時狀態文字；值變更時舊值向上翻出、新值自下方翻入 |
progress | number | — | 進度（0–1）；提供時顯示底部細進度軌道，變更時以 spring 推進 |
expanded | boolean | — | 受控展開狀態；未提供時由元件內部管理 |
onExpandedChange | (expanded: boolean) => void | — | 展開狀態變更時的回呼 |
position | 'fixed-bottom' | 'inline' | 'inline' | fixed-bottom 固定於視窗底部置中（z-50），適合真實應用；inline 隨文件流排版，適合文件預覽 |
children | React.ReactNode | — | 展開後顯示的詳細內容；未提供時膠囊不可展開 |
className | string | — | 附加到膠囊本體的 class |
細節
- Live Activity 隱喻：借用 iOS 即時動態（Live Activity）的資訊層級——一眼掃過（glance）只給圖示、標題、當前狀態三件事，想深究再點開看全貌；適合部署進度、外送追蹤、球賽比分這類「持續進行中」的活動
- 狀態翻轉：
status值變更時，以AnimatePresence mode="popLayout"讓舊值向上翻出、新值自下方翻入，外層overflow-hidden作遮罩，形成小型計分板翻牌效果 - 進度軌道：底部 2px 細軌道由
scaleX驅動（origin-left+ spring），數值跳變時仍以彈性曲線平滑推進，並帶role="progressbar"語意 - 展開變形：膠囊本體帶
layoutspring，children掛載時整體自然長高、卸載時收合；詳細內容延遲淡入，先開膛再上菜。內層以layout="position"保護，長高過程中內容只位移、不被拉伸 - 定位：
fixed-bottom以pointer-events-none外層置中定位，只有膠囊本體吃指標事件，不會擋住頁面其餘區域的點擊 - 毛玻璃質感：半透明底色 +
backdrop-blur-xl，深淺色主題皆保留背景穿透感 - 減少動態效果：使用者系統開啟「減少動態效果」時，翻轉退化為淡入淡出、layout 變形與進度 spring 停用，直接切換；首次渲染仍與 SSR 輸出一致
- 可及性：輔助科技透過
sr-only的role="status"即時區域聽到「標題：狀態」的純文字播報，動畫節點一律aria-hidden；展開觸發器為原生button，帶aria-expanded與aria-controls