76 lines
4.1 KiB
JSON
76 lines
4.1 KiB
JSON
{
|
||
"slug": "buttongroup",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 buttongroup：.kole-btngroup 是内联按钮组，.kole-btngroup-btn 靠首尾圆角拼接，is-selected 标选中。",
|
||
"usage": [
|
||
"组容器 .kole-btngroup 是 display:inline-flex，按内容宽度排布（frameworks/ButtonGroup.css:3）。",
|
||
"每个按钮用 .kole-btngroup-btn；首尾靠结构伪类收角：:first-child 只留左侧圆角、:last-child 只留右侧（frameworks/ButtonGroup.css:8-9）。",
|
||
"选中项加 .is-selected：品牌实底、品牌边框、反色文字，并给紧邻的下一个按钮染上品牌左边框收掉接缝（frameworks/ButtonGroup.css:12-13）。",
|
||
"禁用项加 .is-disabled：文字色降级、底色切 --kole-color-disabled-bg、光标 not-allowed，同时被排除出 hover 规则（frameworks/ButtonGroup.css:10-11）。",
|
||
"尺寸是容器级变体：.kole-btngroup.is-sm 把按钮压到 24px 高 13px 字，.is-lg 提到 40px 高 15px 字（frameworks/ButtonGroup.css:14-15）。"
|
||
],
|
||
"bestPractices": [
|
||
"尺寸类挂在容器而不是按钮上（.kole-btngroup.is-sm .kole-btngroup-btn），单个按钮加 is-sm 不生效（frameworks/ButtonGroup.css:14）。",
|
||
"hover 用 :not(.is-disabled):not(.is-selected) 双排除，保证禁用与选中态不会被悬停改写；自定义按钮样式时要保留这两条排除（frameworks/ButtonGroup.css:10）。",
|
||
"圆角拼接依赖选择器里按钮是直接子元素且顺序正确，中间插入包装元素会破坏首尾判定（frameworks/ButtonGroup.css:8-9）。"
|
||
],
|
||
"a11y": [
|
||
"选中态同时改了底色与文字色（品牌底 + 反色字），对比可读；但语义上仍需 aria-pressed 或 aria-selected 才能被读屏识别（frameworks/ButtonGroup.css:12）。",
|
||
"禁用态已用 not-allowed 光标与降级色双重提示，建议同时加原生 disabled 属性以脱离 Tab 序列（frameworks/ButtonGroup.css:11）。",
|
||
"is-sm 的 24px 高度低于常见 44px 触控建议值，移动端场景优先用默认或 is-lg（frameworks/ButtonGroup.css:14）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：只有两个类 .kole-btngroup（容器）与 .kole-btngroup-btn（按钮），状态 is-selected / is-disabled，尺寸变体 is-sm / is-lg 挂在容器上。",
|
||
"table": [
|
||
{
|
||
"name": "kole-btngroup",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-btngroup-btn",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-selected",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-sm",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-lg",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ButtonGroup.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ButtonGroup.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"buttongroup-ex-1",
|
||
"buttongroup-ex-2"
|
||
],
|
||
"notes": [
|
||
"容器见 frameworks/ButtonGroup.css:3，首尾圆角见 frameworks/ButtonGroup.css:8-9，选中与禁用见 frameworks/ButtonGroup.css:11-13，尺寸变体见 frameworks/ButtonGroup.css:14-15。",
|
||
"示例页只写了 .kole-btngroup 容器（site/examples/buttongroup.json），按钮由脚本或使用者插入。",
|
||
"该文件用 var(--font-family, ...) 兜底字体栈，与骨架文件的 --kole-font-family 写法不同。"
|
||
]
|
||
}
|