86 lines
3.5 KiB
JSON
86 lines
3.5 KiB
JSON
{
|
|
"slug": "chartpanel",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生图表面板：折叠只 toggle is-collapsed 类，工具按钮当前是 alert 占位。",
|
|
"usage": [
|
|
"面板外壳是 .kole-chartpanel，头部 .kole-chartpanel-head 里并排 .kole-chartpanel-title 与 .kole-chartpanel-tools。",
|
|
"折叠开关是 .kole-chartpanel-caret，脚本一行：#toggle 点击后 panel.classList.toggle(\"is-collapsed\")。",
|
|
".kole-chartpanel-tool 是工具按钮（示例为刷新与导出），两处点击都是 alert 占位，没有真实动作。",
|
|
"折叠只改类名不动结构，展开内容始终留在 .kole-chartpanel-body 里。"
|
|
],
|
|
"bestPractices": [
|
|
"刷新与导出是 alert 占位（frameworks/ChartPanel.html:29-30），接真实功能时替换这两个函数体，不要改按钮类名。",
|
|
"is-collapsed 的具体表现（隐藏 body 还是收高度）由 ChartPanel.css 决定，改动前先看样式实现。",
|
|
"折叠会改变容器尺寸，接图表库时在展开后触发一次 resize，否则画布尺寸会停在折叠时的值。"
|
|
],
|
|
"a11y": [
|
|
"折叠按钮没有 aria-expanded，读屏无法得知面板当前是展开还是折叠。",
|
|
".kole-chartpanel-caret 若只是图形，需要 aria-label 说明它是展开/折叠控件。",
|
|
"工具按钮已是原生 button，键盘可达；但要确认它们是 type=\"button\"，否则在表单里会触发提交。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端的载体是类名与状态类：.kole-chartpanel 面板、.kole-chartpanel-head / -body / -tools 分区、is-collapsed 折叠态，按钮点击逻辑由页内脚本绑定。",
|
|
"table": [
|
|
{
|
|
"name": "kole-chartpanel",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:12）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-body",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:21）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-caret",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:18）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-head",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:13）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-title",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:14）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-tool",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:16）。"
|
|
},
|
|
{
|
|
"name": "kole-chartpanel-tools",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/ChartPanel.html:15）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/ChartPanel.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/ChartPanel.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"chartpanel-ex-1",
|
|
"chartpanel-ex-2",
|
|
"chartpanel-ex-3"
|
|
],
|
|
"notes": [
|
|
"面板结构见（frameworks/ChartPanel.html:12-21）。",
|
|
"折叠只 toggle 类名见（frameworks/ChartPanel.html:28）。",
|
|
"刷新与导出占位见（frameworks/ChartPanel.html:29-30）。"
|
|
]
|
|
}
|