99 lines
5.3 KiB
JSON
99 lines
5.3 KiB
JSON
{
|
||
"slug": "topmenu",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 topmenu：与 sidemenu/mixednavigation 共用一份样式，靠 data-direction=\"top\" 出水平导航。",
|
||
"usage": [
|
||
"水平形态要写 data-direction=\"top\"：该属性选择器把根转成横向 flex 并加下边框与 8px 左右内边距（frameworks/SideMenu.css:72-77）。",
|
||
"一级项在 top 下高 48px、左右 16px 内边距；悬停不用底色而改为文字变品牌色，与 side 的底色悬停不同（frameworks/SideMenu.css:78-79）。",
|
||
"选中态在 top 下是一条 2px 底部指示条：.is-active::after 绝对定位贴底、左右各内缩 12px（frameworks/SideMenu.css:80-87）。",
|
||
"下拉子菜单是绝对定位面板（top:100%、z-index 50、最小宽 160px），默认 display:none（frameworks/SideMenu.css:89-101）。",
|
||
"展开由 hover 与 focus-within 共同触发：.kole-menu-item:hover > .kole-menu-children 与 :focus-within 都会 display:block，因此键盘 Tab 到子项同样能展开（frameworks/SideMenu.css:102-103）。",
|
||
"子菜单内的项改为自适应高度、8px 12px 内边距、小圆角，悬停与选中都用品牌浅底加品牌字色（frameworks/SideMenu.css:104-116）。",
|
||
"箭头 .kole-menu-arrow 在 .kole-menu-item.is-open 时旋转 90 度；徽标是错误色胶囊（frameworks/SideMenu.css:37-50）。"
|
||
],
|
||
"bestPractices": [
|
||
"三份菜单文件（SideMenu.css / TopMenu.css / MixedNavigation.css）内容逐字节相同，文件头写明同服务三个组件，改样式要按生成器流程改模板（frameworks/SideMenu.css:1-9）。",
|
||
"top 的下拉不靠 .is-open 而靠 :hover 与 :focus-within，所以 .is-open 在 top 下对子级没有展开效果；只有 side 用 .is-open 控制（frameworks/SideMenu.css:102-103 与 153）。",
|
||
"下拉面板的 z-index 是 50，比 .kole-menu-pop 的 200 低，同页同时在用两种浮层时注意覆盖顺序（frameworks/SideMenu.css:100 与 66）。"
|
||
],
|
||
"a11y": [
|
||
"键盘可达性由 :focus-within 规则保证（frameworks/SideMenu.css:102-103），这是本文件里少见的键盘友好写法，覆盖样式时不要删掉这条。",
|
||
"选中指示条是 2px 品牌色线条，属于纯视觉表达，需要配合 aria-current 或文字（frameworks/SideMenu.css:80-87）。",
|
||
"菜单根需要 role 与 aria-label：示例都写了（site/examples/topmenu.json），样式层不提供（frameworks/SideMenu.css:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：契约载体是 .kole-menu 加 .kole-menu-item / -icon / -label / -badge / -arrow / -children / -pop / -top / -side；水平形态由根元素 data-direction=\"top\" 参数表达，状态为 is-active / is-disabled / is-open。",
|
||
"table": [
|
||
{
|
||
"name": "kole-menu",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-active",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-badge",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-arrow",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "is-open",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-menu-children",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/TopMenu.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/TopMenu.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"topmenu-ex-1",
|
||
"topmenu-ex-2",
|
||
"topmenu-ex-3"
|
||
],
|
||
"notes": [
|
||
"top 形态与下拉见 frameworks/SideMenu.css:72-116，键盘展开见 frameworks/SideMenu.css:102-103，箭头与徽标见 frameworks/SideMenu.css:37-50。",
|
||
"TopMenu.css 与 SideMenu.css、MixedNavigation.css 逐字节相同（文件头 frameworks/SideMenu.css:5 列明三者）。",
|
||
"示例三例分别是默认、含徽章与禁用、下拉展开（site/examples/topmenu.json），都只写 .kole-menu 根。"
|
||
]
|
||
}
|