70 lines
3.7 KiB
JSON
70 lines
3.7 KiB
JSON
{
|
||
"slug": "quicknav",
|
||
"end": "css",
|
||
"curated": true,
|
||
"summary": "CSS 端的 quicknav：.kole-quicknav 是可换行快捷入口条，.kole-quicknav-item 是 92px 竖排单元。",
|
||
"usage": [
|
||
"容器 .kole-quicknav 是可换行的横向 flex 加 6px 间距，宽度不够时自动折行（frameworks/QuickNav.css:2）。",
|
||
"单元 .kole-quicknav-item 定宽 92px、纵向 flex 居中、圆角和 14px 6px 内边距，光标 pointer 表示可点（frameworks/QuickNav.css:3）。",
|
||
"悬停只换底色：.kole-quicknav-item:hover 用品牌浅底，不做位移或投影（frameworks/QuickNav.css:4）。",
|
||
"图标 .kole-quicknav-icon 是 42px 圆角方块、12px 圆角、品牌浅底加品牌字色，20px 字号适合放图标字形（frameworks/QuickNav.css:5）。",
|
||
"文字 .kole-quicknav-label 是 13px 正文色；空态用 .kole-quicknav-empty（次级色、12px 内边距）（frameworks/QuickNav.css:6-7）。"
|
||
],
|
||
"bestPractices": [
|
||
"单元宽度 92px 是固定值，文字过长会溢出；标签建议控在两到四字，超长文案在业务侧截断（frameworks/QuickNav.css:3）。",
|
||
"该文件只有 7 条规则、没有 is-* 状态类，也没有选中态：需要高亮当前入口要自行扩展（frameworks/QuickNav.css:3-4）。",
|
||
"容器换行由 flex-wrap 提供，不需要手写断行；把单元放在容器内即自动排布（frameworks/QuickNav.css:2）。"
|
||
],
|
||
"a11y": [
|
||
"单元是 div 加 cursor:pointer，建议改用 a 或 button 才能键盘可达；样式层不提供可聚焦性（frameworks/QuickNav.css:3）。",
|
||
"图标方块是 42px 装饰区，若内无文本需标为装饰，语义由 .kole-quicknav-label 承担（frameworks/QuickNav.css:5）。",
|
||
"悬停只用底色变化，不影响对比度；请确认文字色在品牌浅底上仍达到对比要求（frameworks/QuickNav.css:4、6）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "classes",
|
||
"note": "CSS 端无 props：载体只有五个类 —— .kole-quicknav（容器）、.kole-quicknav-item（单元）、.kole-quicknav-icon（图标块）、.kole-quicknav-label（文字）、.kole-quicknav-empty（空态）；没有状态类。",
|
||
"table": [
|
||
{
|
||
"name": "kole-quicknav",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/QuickNav.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-quicknav-item",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/QuickNav.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-quicknav-icon",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/QuickNav.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-quicknav-label",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/QuickNav.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
},
|
||
{
|
||
"name": "kole-quicknav-empty",
|
||
"type": "类名",
|
||
"desc": "在 frameworks/QuickNav.css 中定义的类；按类名组合表达该组件的外观与状态。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/QuickNav.css",
|
||
"kind": "CSS",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"quicknav-ex-1"
|
||
],
|
||
"notes": [
|
||
"容器见 frameworks/QuickNav.css:2，单元与悬停见 frameworks/QuickNav.css:3-4，图标与文字见 frameworks/QuickNav.css:5-6，空态见 frameworks/QuickNav.css:7。",
|
||
"该文件共 8 行是目标清单中最短者之一，只有 5 个类、无状态类与焦点样式。",
|
||
"示例只写了 .kole-quicknav 容器（site/examples/quicknav.json），单元由脚本渲染。"
|
||
]
|
||
}
|