← 全部範本

評分表 <ScoreTable />

2–4 個方案並列,3–5 條標準,每格是一個帶色的短標籤:good、mid、bad、plain 四種。為模印風格設計,其他風格也能用。配 build: 'reveal' 逐行出現。

分組
對比 · 黑表頭,每格一個彩色標籤
元件
ScoreTable · #score-table
互動
按 → 逐行出現

適合

  • 幾個方案按同一組標準打分
  • 結論能寫成兩三個字

不適合

  • 格子裡要寫一句話:用 CompareTable
  • 只比較兩項:用 Contrast

內容上限

1columns 2–4 個,每個 ≤ 10 字
2rows 3–5 行,label ≤ 8 字
3每格 text ≤ 8 個字元
4頁標題 ≤ 22 字

欄位

欄位型別
kicker · 必填string小節名
title · 必填string | string[]標題
leadstring導語
columns · 必填string[]方案
rows · 必填{ label, cells: { text, tone? }[] }[]標準與評分
cornerstring左上角表頭
sourcestring出處

範例程式碼

<ScoreTable
  kicker="三種出口"
  title="放映、PDF、PPTX 怎麼選"
  columns={['HTML 放映', 'PDF', 'PPTX']}
  rows={[{ label: '離線開啟', cells: [{ text: '可以', tone: 'good' }, …] }]}
/>