97 lines
5.0 KiB
JSON
97 lines
5.0 KiB
JSON
{
|
||
"slug": "radio",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 radio：.kole-radio-option 是单选项行，控制类 .kole-radio-control 做输入外观。",
|
||
"usage": [
|
||
"选项行 .kole-radio-option 是 inline-flex 加 4px 间距、垂直居中，把圆点与文字贴在一行（frameworks/Radio.css:31）。",
|
||
"输入控件类 .kole-radio-control 取 --kole-control-height-default 高度、1px 边框、--kole-radius-base 圆角与卡片底（frameworks/Radio.css:16）。",
|
||
"禁用态用 .kole-radio-disabled 或原生 [disabled]，两者都是 not-allowed 光标加 0.55 透明度（frameworks/Radio.css:13）。",
|
||
"方向变体 .kole-radio-vertical 与 -horizontal 只改 flex-direction，用于选项组的纵向或横向排布（frameworks/Radio.css:23-24）。",
|
||
"外观变体 .kole-radio-primary / -secondary / -compact 分别给品牌实底、品牌浅底与紧凑内边距（frameworks/Radio.css:10-12）。",
|
||
"视觉容器用 .kole-radio-surface 或 -panel（卡片底色加 1px 边框加中圆角加低投影）（frameworks/Radio.css:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"该文件是 72 行生成骨架（与 Alert.css / Avatar.css 等 20 个文件仅首行组件名不同），单选语义只有 option 与 control 两条（第 16、31 行）；骨架里没有真正的选中圆点样式，选中视觉要靠原生 input 或业务侧自绘（frameworks/Radio.css:16、31）。",
|
||
"禁用同时支持类名与 [disabled] 属性两种写法（第 13 行是合并选择器），用原生属性更稳，能自动脱离 Tab 序列（frameworks/Radio.css:13）。",
|
||
"选项组若用键盘方向键切换，需要业务侧管理 roving tabindex；样式文件只提供排布与外观（frameworks/Radio.css:31）。"
|
||
],
|
||
"a11y": [
|
||
"单选项建议用原生 input type=\"radio\" 加同名 name 分组，样式层只给间距与控件外观（frameworks/Radio.css:31）。",
|
||
"示例在选项上写了 type（site/examples/radio.json），说明原生类型由业务侧声明。",
|
||
"禁用态用 [disabled] 属性时读屏可感知；只用 .kole-radio-disabled 类则需另补 aria-disabled（frameworks/Radio.css:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-radio-option（选项行）与 .kole-radio-control（输入控件），加骨架通用的 -vertical / -horizontal（方向）、-primary / -secondary / -compact（外观）、-surface / -panel（卡底）与 .kole-radio-disabled 状态。",
|
||
"table": [
|
||
{
|
||
"name": "kole-radio",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-surface",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-panel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-desc",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-control",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-primary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-secondary",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-compact",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-radio-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/Radio.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Radio.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"radio-ex-1",
|
||
"radio-ex-2"
|
||
],
|
||
"notes": [
|
||
"选项行见 frameworks/Radio.css:31，控件类见 frameworks/Radio.css:16，禁用见 frameworks/Radio.css:13，方向与外观变体见 frameworks/Radio.css:10-12、23-24。",
|
||
"该文件属 72 行生成骨架家族（与 Alert.css 逐行同构），骨架内非单选语义的块未写入本页类名表。",
|
||
"示例 ex-1 用 radio 加 option，ex-2 用 surface 加 desc（site/examples/radio.json）。"
|
||
]
|
||
}
|