81 lines
4.2 KiB
JSON
81 lines
4.2 KiB
JSON
{
|
||
"slug": "buttongroup",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "按钮组：options 给按钮、value 定选中（多选为数组），点击切换经 onChange 上抛新值。",
|
||
"usage": [
|
||
"React 端单选多选共用一个组件：multiple 为真时 value 是数组并做增删，否则是单值直接替换（ButtonGroup.jsx:4-20）。",
|
||
"选中判断在组件内用 indexOf：单选比较严格相等，多选判断数组是否包含（ButtonGroup.jsx:5-7）。",
|
||
"禁用项在 toggle 首行返回，同时获得原生 disabled 与 is-disabled 类（ButtonGroup.jsx:9,29-30）。",
|
||
"尺寸用 size=\"small\" | \"large\" 映射到 is-sm / is-lg 类（ButtonGroup.jsx:22,24）。",
|
||
"回调结构随模式变化：多选给新数组、单选给选中值，父组件按 same 类型回填 value（ButtonGroup.jsx:13-19）。"
|
||
],
|
||
"bestPractices": [
|
||
"多选模式下必须传数组初值，否则 (value || []).indexOf 走空数组分支、已有选中会丢失（ButtonGroup.jsx:6,12）。",
|
||
"每个 option 都要带 value，label 仅用于展示；不要依赖下标做业务判断。",
|
||
"组件不提供「至少选一个」约束，单选也不支持取消，需要可取消请自行在 onChange 里处理。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "options",
|
||
"type": "Array<{ label, value, disabled? }>",
|
||
"desc": "按钮配置数组"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "string | string[]",
|
||
"desc": "选中值，多选模式为数组"
|
||
},
|
||
{
|
||
"name": "multiple",
|
||
"type": "boolean",
|
||
"desc": "多选模式，点击对数组做增删"
|
||
},
|
||
{
|
||
"name": "size",
|
||
"type": "'default' | 'small' | 'large'",
|
||
"desc": "尺寸，映射 is-sm / is-lg"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "(next) => void",
|
||
"desc": "选中变化回调，参数类型随 multiple 变化"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"每个按钮是原生 <button> 且有 disabled 属性（ButtonGroup.jsx:26-33），键盘可达、禁用状态可被播报。",
|
||
"缺少 role=\"group\" 与 aria-pressed/aria-label：读屏不知道这是一组互斥选项，也不知道哪些已选中。",
|
||
"容器无 aria-label，页面出现多组按钮组时无法区分用途，建议在业务侧补。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ButtonGroup.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/ButtonGroup.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"buttongroup-ex-1",
|
||
"buttongroup-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/ButtonGroup.jsx:4 中可指到 options（Array<{ label, value, disabled? }>）——按钮配置数组",
|
||
"frameworks/ButtonGroup.jsx:4 中可指到 value（string | string[]）——选中值，多选模式为数组",
|
||
"frameworks/ButtonGroup.jsx:4 中可指到 multiple（boolean）——多选模式，点击对数组做增删",
|
||
"frameworks/ButtonGroup.jsx:4 中可指到 size（'default' | 'small' | 'large'）——尺寸，映射 is-sm / is-lg",
|
||
"frameworks/ButtonGroup.jsx:4 中可指到 onChange（(next) => void）——选中变化回调，参数类型随 multiple 变化",
|
||
"props 解构清单见 frameworks/ButtonGroup.jsx:4-4；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/ButtonGroup.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：5 行中 5 行是 frameworks/ButtonGroup.jsx 解构出的顶层 props（解构块 frameworks/ButtonGroup.jsx:4-4）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|