← All templates

证明分栏 <ProofSplit />

左边是深色面板:一个大图标方块和几行“设置项”;右边是标题、导语、两个大数字和勾选项。

Template and style descriptions are currently available in Chinese only.

Group
论证 · 一个能力加两个证据数字
Component
ProofSplit · #proof-split

Good for

  • 说明一个自动化能力是怎么设定的,以及效果
  • 一句主张配两个硬数字

Avoid when

  • 数字多于 2 个:用 KpiBoard
  • 没有可以列成设置项的规则

Content limits

1rows 3–5 行:label ≤ 8,value ≤ 12 个字符
2stats 正好 2 个:value ≤ 6 个字符,label ≤ 12 字
3checks 0–3 条,每条 ≤ 20 字

Fields

FieldType
kicker · requiredstring小节名,2–8 字
title · requiredstring | string[]标题;数组手动断行
leadstring一两句导语,≤ 60 字
sourcestring事实出处
icon · requiredIconName面板上的大图标
rows · required{ label, value }[]设置项
stats · required{ value, label }[2]两个数字
checksstring[]勾选项

Example

<ProofSplit
  kicker="检查"
  title="每次构建,都自己检查一遍"
  icon="shield"
  rows={[{ label: 'FONT', value: '≥ 16.5u' }, { label: 'VIEWPORTS', value: '4 种' }, { label: 'REMOTE', value: '禁止' }]}
  stats={[{ value: '16.5u', label: '最小字号' }, { value: '4', label: '检查的视口' }]}
  source="scripts/qa.mjs"
/>