← 全部範本

後台卡片 <AppCards />

標題下一排手搓的應用面板:視窗名、標題、狀態膠囊、2–5 個欄位和標籤,都已經填好。每張卡標著「示意介面」。配 build: 'reveal' 時逐張出現。

分組
擬真介面 · 2–4 個填好內容的應用面板
元件
AppCards · #app-cards

適合

  • 同一件東西在幾個平台、幾種出口裡的樣子
  • 用填好的表單代替文字描述

不適合

  • 有真實截圖:用 TabbedShot
  • 要比較數字:用 CompareTable

內容上限

1cards 2–4 張
2title ≤ 16 字
3fields 2–5 個,value ≤ 16 字
4tags 0–4 個
5頁標題 ≤ 22 字
6source 寫明是示意

欄位

欄位型別
kicker · 必填string小節名
title · 必填string | string[]標題
leadstring導語
cards · 必填{ app, title, fields: { label, value }[], tags?, status?: { text, tone?: 'ok' | 'wait' | 'stop' }, label? }[]面板
sourcestring出處或示意說明

範例程式碼

<AppCards
  kicker="三種出口"
  title="同一份內容,三種檔案"
  cards={[{ app: '匯出', title: 'PDF', fields: [{ label: '指令', value: 'build 後列印' }], status: { text: '可用' } }]}
  source="示意介面"
/>