99 lines
5.6 KiB
JSON
99 lines
5.6 KiB
JSON
{
|
||
"slug": "mixednavigation",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 mixednavigation：与另外两个菜单共用样式，靠 data-direction=\"mixed\" 出顶部一级加侧边二级。",
|
||
"usage": [
|
||
"混合形态要写 data-direction=\"mixed\"：根容器得到 1px 边框、大圆角与 overflow:hidden，把顶栏与侧栏包成一块（frameworks/SideMenu.css:156-160）。",
|
||
"顶部一级放在 .kole-menu-top 里：它是横向 flex 加 4px 间距与下边框，一级项高 48px（frameworks/SideMenu.css:161-167）。",
|
||
"顶栏选中态是 2px 底部指示条：.kole-menu-top > .kole-menu-item.is-active::after 贴底、左右内缩 12px（frameworks/SideMenu.css:169-176）。",
|
||
"侧边二级放在 .kole-menu-side 里：168px 宽、最小高 200px、表头底色加右分隔线，内层项高 40px（frameworks/SideMenu.css:177-184）。",
|
||
"侧栏选中态是品牌浅底加左侧 3px 竖条（inset-inline-start:0、宽 3px）（frameworks/SideMenu.css:185-196）。",
|
||
"顶栏项悬停只压掉底色（background:none），侧栏项的选中色由 .is-active 承接，两个方向的悬停规则不一致（frameworks/SideMenu.css:168、185-187）。",
|
||
"徽标 .kole-menu-badge 与箭头 .kole-menu-arrow 是三个方向共用的类，箭头在 is-open 时旋转 90 度（frameworks/SideMenu.css:37-50）。"
|
||
],
|
||
"bestPractices": [
|
||
"mixed 与 side 的选中样式都是品牌浅底加 3px 竖条，但选择器前缀不同（[data-direction=\"mixed\"] > .kole-menu-side 与 [data-direction=\"side\"]），复制样式时不能跨方向套用（frameworks/SideMenu.css:185-196 与 133-141）。",
|
||
"顶栏与侧栏必须分别是 .kole-menu-top 与 .kole-menu-side 的直接子元素，所有 rules 都写成 > 直接子选择器，中间加包装层会整套失效（frameworks/SideMenu.css:161、177）。",
|
||
"三个菜单组件共用这一份生成样式，单独给 mixednavigation 加视觉时要走生成器模板，否则会被下次生成覆盖（frameworks/SideMenu.css:1-9）。"
|
||
],
|
||
"a11y": [
|
||
"混合导航的两级结构建议分别补导航语义（顶栏与侧栏各自 role 与可访问名称），示例在根上写了 role 与 aria-label（site/examples/mixednavigation.json）（frameworks/SideMenu.css:156）。",
|
||
"顶栏选中条与侧栏竖条都是纯视觉指示，需要配合 aria-current 才能被读屏识别（frameworks/SideMenu.css:169-176、188-196）。",
|
||
"侧栏二级默认不展开（display:none），展开需 .is-open 并同步 aria-expanded（frameworks/SideMenu.css:153）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：契约载体是 .kole-menu 加 .kole-menu-top / -side（两个方向容器）与 .kole-menu-item / -icon / -label / -badge / -arrow / -children；混合形态由根元素 data-direction=\"mixed\" 参数表达，状态为 is-active / is-disabled / is-open。",
|
||
"table": [
|
||
{
|
||
"name": "kole-menu",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-badge",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-arrow",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-children",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/MixedNavigation.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/MixedNavigation.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"mixednavigation-ex-1",
|
||
"mixednavigation-ex-2",
|
||
"mixednavigation-ex-3"
|
||
],
|
||
"notes": [
|
||
"mixed 容器与顶栏见 frameworks/SideMenu.css:156-176，侧栏见 frameworks/SideMenu.css:177-196，子级展开见 frameworks/SideMenu.css:148-153。",
|
||
"MixedNavigation.css 与 SideMenu.css、TopMenu.css 逐字节相同，文件头 frameworks/SideMenu.css:5 明确三者共用同一份样式。",
|
||
"示例三例（默认 / 含徽章与禁用 / 二级联动）都只写 .kole-menu 根，方向参数由页面脚本设（site/examples/mixednavigation.json）。"
|
||
]
|
||
}
|