115 lines
5.3 KiB
JSON
115 lines
5.3 KiB
JSON
{
|
||
"slug": "divider",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "React 端的 Divider：title 渲染说明文字、<hr> 承担分隔线，orientation 与 variant 未参与渲染。",
|
||
"usage": [
|
||
"结构是「说明文字 + <hr>」的组合：title 进 .kole-divider-desc 的 span，分隔线用原生 <hr>（frameworks/Divider.jsx:8）。",
|
||
"title 有默认值「更多信息」：不传也会渲染出这段文字，纯线条分隔要传空串（frameworks/Divider.jsx:4,8）。",
|
||
"orientation 声明默认 horizontal，但 JSX 里没有引用，垂直分隔不会自动切换结构或类名（frameworks/Divider.jsx:4,8）。",
|
||
"variant（solid 默认）同样未参与：类名固定为 kole-divider 与 kole-divider-desc，没有按变体加后缀（frameworks/Divider.jsx:4,8）。",
|
||
"children 与 5 个 onXxx 都只在解构签名里，Divider 是纯展示件、没有交互出口（frameworks/Divider.jsx:4）。"
|
||
],
|
||
"bestPractices": [
|
||
"vertical 用法在本实现里无效：orientation 不影响渲染，竖线得靠外部容器旋转或自定义样式（frameworks/Divider.jsx:4,8）。",
|
||
"只要线条不要文字时传 title=\"\"，否则默认的「更多信息」会一直出现在分隔线上方（frameworks/Divider.jsx:8）。",
|
||
"内联 <hr> 的默认样式由浏览器给，外观差异落在 Divider.css 的 .kole-divider-divider 上（frameworks/Divider.jsx:8）。",
|
||
"variant 传 dashed / dotted 之类的值不生效，线条样式不由 prop 决定（frameworks/Divider.jsx:4,8）。"
|
||
],
|
||
"a11y": [
|
||
"用原生 <hr> 表达内容分组（frameworks/Divider.jsx:8），读屏器会播报水平分隔，语义正确。",
|
||
"title 只是普通 span 文本，不是标题元素，长文档大纲里不会出现这一级（frameworks/Divider.jsx:8）。",
|
||
"垂直分隔在本实现里仍是 <hr>（水平语义），读屏器播报与实际视觉方向可能不一致（frameworks/Divider.jsx:8）。",
|
||
"组件无可聚焦元素，也不会打断键盘顺序（frameworks/Divider.jsx:8）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props，但本实现只消费 title（渲染说明文字）；orientation / variant / children 与 5 个 onXxx 均未参与，没有 v-model 也无状态。",
|
||
"table": [
|
||
{
|
||
"name": "children",
|
||
"type": "属性",
|
||
"desc": "解构声明但 JSX 未渲染（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onLoadMore",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onSubmit",
|
||
"type": "属性",
|
||
"desc": "解构声明但未绑定（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "orientation",
|
||
"type": "String",
|
||
"desc": "声明默认 horizontal，渲染未引用，不切换结构（frameworks/Divider.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "属性",
|
||
"desc": "说明文字，渲染进 .kole-divider-desc，默认「更多信息」（frameworks/Divider.jsx:4,8）"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定该回调（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClick",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定该回调（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "onClose",
|
||
"type": "事件",
|
||
"desc": "React 事件以 onXxx prop 命名；本实现未绑定该回调（frameworks/Divider.jsx:4）"
|
||
},
|
||
{
|
||
"name": "children",
|
||
"type": "插槽",
|
||
"desc": "React 无插槽语法，children 即默认子节点；本实现未使用（frameworks/Divider.jsx:4）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Divider.jsx",
|
||
"kind": "React",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Divider.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"divider-ex-1",
|
||
"divider-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 解构见 frameworks/Divider.jsx:4，共 9 个；渲染主体见第 8 行（span 文本 + hr 线）。",
|
||
"生效范围核验：第 8 行只引用 title，orientation / variant / children 与 5 个 onXxx 未参与（frameworks/Divider.jsx:4,8）。",
|
||
"实现缺口：orientation 与 variant 未接线，垂直方向无对应结构（frameworks/Divider.jsx:8）；按实现写，未发明 is-vertical 类。",
|
||
"a11y 依据：分隔线是原生 hr，见 frameworks/Divider.jsx:8；全文无 role / aria-* 补充。",
|
||
"apiCarrier.table 保留了自动生成时的「属性 + 事件 + 插槽」三套同名行（onChange / onClick / onClose / children 各两次），本次只改 desc 文案，未调整行结构。"
|
||
]
|
||
}
|