103 lines
4.3 KiB
JSON
103 lines
4.3 KiB
JSON
{
|
|
"slug": "topmenu",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生顶部菜单：方向固定 top，下拉由 state.open 驱动并重渲染。",
|
|
"usage": [
|
|
"族参数写死为 var FAMILY_DIRECTION = \"top\"、PARAMS = { direction: FAMILY_DIRECTION, collapsed: false }，顶部方向不需要调用方传。",
|
|
"一级水平排在 .kole-menu-top 里，子级不落侧栏而是渲染成 .kole-menu-pop（含 .kole-menu-pop-title），这是 top 与 side 的结构差别。",
|
|
"展开由 state.open 单值控制：点击父级时 state.open = state.open === key ? \"\" : key，即再点一次收起。",
|
|
"父级判定是 ITEMS.some(it => it.key === key && it.children)，命中就切 open，否则改 state.active。",
|
|
"页面只留空壳 <nav class=\"kole-menu\" data-behavior=\"layout-menu-rows\">，结构与事件全部由 createMenu 现场生成。"
|
|
],
|
|
"bestPractices": [
|
|
"这是生成物（由 tools/gen-family-impl.mjs 生成），改结构要改生成器而不是这个文件。",
|
|
"open 是单值，同时只能展开一个一级菜单，要支持多个需把它改成集合。",
|
|
"data-direction 属性由脚本写入，样式很可能按属性选择器匹配，手改类名不会生效。"
|
|
],
|
|
"a11y": [
|
|
"空壳已有 role=\"navigation\" 与 aria-label，区域可被读屏定位。",
|
|
"一级项由脚本补 role=\"menuitem\" 与 aria-expanded，方向为 top 时下拉的展开状态靠这两个属性传达。",
|
|
"下拉面板 .kole-menu-pop 的点外关闭与 Escape 在示例里没有实现，键盘用户只能再点一次父项。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "H5 端给空壳再加数据：<nav class=\"kole-menu\" role=\"navigation\" aria-label data-behavior>，方向由脚本写进 data-direction=\"top\" 属性，一级在 .kole-menu-top、下拉在 .kole-menu-pop，展开状态由页内 state.open 驱动重渲染。",
|
|
"table": [
|
|
{
|
|
"name": "active",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:66）。"
|
|
},
|
|
{
|
|
"name": "demo-block",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:12）。"
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:57）。"
|
|
},
|
|
{
|
|
"name": "kole-menu",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:26）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-arrow",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:88）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-badge",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:86）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-children",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:83）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-icon",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:85）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-label",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:93）。"
|
|
},
|
|
{
|
|
"name": "kole-menu-pop",
|
|
"type": "类名",
|
|
"desc": "H5 端结构里使用的类名（frameworks/TopMenu.html:100）。"
|
|
}
|
|
]
|
|
},
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/TopMenu.html",
|
|
"kind": "H5 原生",
|
|
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
|
},
|
|
{
|
|
"file": "frameworks/TopMenu.css",
|
|
"kind": "样式",
|
|
"desc": "该组件的样式文件，类名口径以它为准。"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"topmenu-ex-1",
|
|
"topmenu-ex-2",
|
|
"topmenu-ex-3"
|
|
],
|
|
"notes": [
|
|
"族参数声明与生成物标注见（frameworks/TopMenu.html:16-23），方向常量见（frameworks/TopMenu.html:42）。",
|
|
"空壳容器与 data-behavior 见（frameworks/TopMenu.html:26）。",
|
|
"data-direction 写入见（frameworks/TopMenu.html:119），点击分支见（frameworks/TopMenu.html:124-136）。",
|
|
"初始化调用见（frameworks/TopMenu.html:152）。"
|
|
]
|
|
}
|