86 lines
4.5 KiB
JSON
86 lines
4.5 KiB
JSON
{
|
||
"slug": "radiocard",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 radiocard：.kole-radiocard 是卡片单选，is-selected 换品牌边框加浅底并填圆点。",
|
||
"usage": [
|
||
"多卡排列用 .kole-radiocard-grid，display:grid 加 12px 间距，列数交由外部决定（frameworks/RadioCard.css:3）。",
|
||
"单卡 .kole-radiocard 是横向 flex、12px 间距、顶对齐，16px 内边距加卡片底，光标 pointer（frameworks/RadioCard.css:4-5）。",
|
||
"选中态挂卡上：.kole-radiocard.is-selected 同时换品牌边框与品牌浅底（frameworks/RadioCard.css:7）。",
|
||
"单选圆点是 .kole-radiocard-mark：16px 圆形、2px 边框；选中时填品牌色并用 inset 内阴影造出 3px 白环，形成空心圆效果（frameworks/RadioCard.css:12-13）。",
|
||
"内容三段用 .kole-radiocard-icon（24px 字号）、.kole-radiocard-body（flex:1）、.kole-radiocard-title 与 .kole-radiocard-desc（frameworks/RadioCard.css:8-11）。",
|
||
"悬停只换边框色为 #C9D4F2，不改底色（frameworks/RadioCard.css:6）。"
|
||
],
|
||
"bestPractices": [
|
||
"与 CheckboxCard 结构几乎一致，区别在圆点是圆形（border-radius:50%）且用 inset 白环画空心，而勾选卡是方形加 ::after 对勾（frameworks/RadioCard.css:12-13）。",
|
||
"选中圆点的空心是 box-shadow:inset 实现的，改 mark 尺寸时 3px 白环不会自动缩放，要一并调（frameworks/RadioCard.css:13）。",
|
||
"悬停边框色 #C9D4F2 是硬编码，与选中态的品牌色不同源；想统一走令牌需覆盖该条（frameworks/RadioCard.css:6）。"
|
||
],
|
||
"a11y": [
|
||
"卡片是 div 加 pointer 光标，建议用原生 radio 或补 role=\"radio\" 与 aria-checked（frameworks/RadioCard.css:4）。",
|
||
"选中信息不只有颜色：圆点同时被填色并出现白环，形状变化可作为第二通道（frameworks/RadioCard.css:13）。",
|
||
"示例在网格容器上写了 role（site/examples/radiocard.json），说明分组语义由业务侧声明。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-radiocard-grid（网格）与 .kole-radiocard（卡）加 .kole-radiocard-icon / -body / -title / -desc / -mark 五个分区类，状态只有 .is-selected。",
|
||
"table": [
|
||
{
|
||
"name": "kole-radiocard-grid",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-selected",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radiocard-mark",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/RadioCard.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/RadioCard.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"radiocard-ex-1"
|
||
],
|
||
"notes": [
|
||
"网格见 frameworks/RadioCard.css:3，卡片与悬停见 frameworks/RadioCard.css:4-6，选中态见 frameworks/RadioCard.css:7，圆点见 frameworks/RadioCard.css:12-13。",
|
||
"前缀是 kole-radiocard（不是 kole-radio-card），按组件名拼类名会失效。",
|
||
"该文件与 CheckboxCard.css 结构高度对称，主要差异在 mark 的形状与伪元素用法（frameworks/RadioCard.css:12-13）。"
|
||
]
|
||
}
|