88 lines
4.7 KiB
JSON
88 lines
4.7 KiB
JSON
{
|
||
"slug": "chartpanel",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 chartpanel：.kole-chartpanel 是卡壳，is-collapsed 收起正文并旋转 .kole-chartpanel-caret。",
|
||
"usage": [
|
||
"面板外壳 .kole-chartpanel 自带卡片底、1px 边框和圆角，是唯一的容器层（frameworks/ChartPanel.css:3）。",
|
||
"头部 .kole-chartpanel-head 用 space-between 把标题推到左、工具区推到右，内边距 12px 16px（frameworks/ChartPanel.css:4）。",
|
||
"标题 .kole-chartpanel-title 是 14px、字重 500、--kole-color-text-title 色（frameworks/ChartPanel.css:5）。",
|
||
"工具区 .kole-chartpanel-tools 是 8px 间距的横向 flex，单个按钮 .kole-chartpanel-tool 无边框无底色、次级文字色，hover 才出现品牌浅底与品牌字色（frameworks/ChartPanel.css:6-8）。",
|
||
"折叠箭头 .kole-chartpanel-caret 只声明了 transform 过渡 0.2s（frameworks/ChartPanel.css:9）。",
|
||
"收起只需给根元素加 .is-collapsed：箭头转 -90 度，同时 .kole-chartpanel-body 被 display:none 隐藏（frameworks/ChartPanel.css:10-11）。"
|
||
],
|
||
"bestPractices": [
|
||
"收起是整块隐藏而不是限高：.kole-chartpanel-body 在 collapsed 下直接 display:none，若需要保留高度动画得改这一条（frameworks/ChartPanel.css:11）。",
|
||
"工具按钮的 hover 同时改底色与字色，自定义品牌色时这两处要一起换，否则会出现浅底深字的断层（frameworks/ChartPanel.css:8）。",
|
||
"箭头旋转角度写在 .kole-chartpanel.is-collapsed .kole-chartpanel-caret 上，必须保持 caret 是根元素的后代，包一层 wrapper 会失配（frameworks/ChartPanel.css:10）。"
|
||
],
|
||
"a11y": [
|
||
"工具按钮只有图标（示例为刷新与导出），需要 aria-label 才能被读屏识别；样式层不提供（frameworks/ChartPanel.css:7）。",
|
||
"折叠态只体现在箭头方向与正文隐藏上，建议由业务侧同步 aria-expanded，不要只靠视觉（frameworks/ChartPanel.css:10-11）。",
|
||
"正文 .kole-chartpanel-body 内边距 16px，图表区对比度取决于 --kole-color-text-body，别在深色主题下改浅（frameworks/ChartPanel.css:12）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体是 .kole-chartpanel（外壳）与 .kole-chartpanel-head / -title / -tools / -tool / -caret / -body 六个结构类，状态只有 .is-collapsed。",
|
||
"table": [
|
||
{
|
||
"name": "kole-chartpanel",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-head",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-title",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-tools",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-tool",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-caret",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-collapsed",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-chartpanel-body",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/ChartPanel.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ChartPanel.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"chartpanel-ex-1",
|
||
"chartpanel-ex-2",
|
||
"chartpanel-ex-3"
|
||
],
|
||
"notes": [
|
||
"外壳见 frameworks/ChartPanel.css:3，头部与标题见 frameworks/ChartPanel.css:4-5，工具区见 frameworks/ChartPanel.css:6-8，折叠态见 frameworks/ChartPanel.css:10-11。",
|
||
"示例拆成三个只含工具按钮的片段（site/examples/chartpanel.json 的 ex-1/ex-2/ex-3），外壳需自行拼装。",
|
||
"契约的 collapsible 语义在 css 端落成 .is-collapsed 类，本页未写成 prop。"
|
||
]
|
||
}
|