{
  "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），单元由脚本渲染。"
  ]
}