{
 "slug": "anchornav",
 "mode": "single",
 "examples": [
  {
   "id": "anchornav-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"demo\">\n  <h1>Kole UI · AnchorNav 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动</p>\n  <nav class=\"kole-anchor fixed\" id=\"anchor\"></nav>\n  <section id=\"intro\">\n    <h2>1. 产品简介</h2>\n    <p>本系统是一套企业级中后台解决方案……（长文本占位，可滚动测试高亮）</p>\n    <p style=\"margin-top:40px\">更多内容用于撑高页面，方便观察当前章节高亮效果。</p>\n  </section>\n  <section id=\"install\">\n    <h2>2. 安装与初始化</h2>\n    <p>通过 npm 安装后，在入口文件引入主题与组件库。</p>\n    <p style=\"margin-top:40px\">配置项说明略。</p>\n  </section>\n  <section id=\"guide\">\n    <h2>3. 开发指南</h2>\n    <p>包含布局、主题与国际化三部分。</p>\n    <div id=\"layout\" style=\"margin-top:16px\">\n      <h3>3.1 布局</h3>\n      <p>侧边栏 + 顶栏的经典后台布局。</p>\n    </div>\n    <div id=\"theme\" style=\"margin-top:16px\">\n      <h3>3.2 主题</h3>\n      <p>通过 CSS 变量统一调整品牌色。</p>\n    </div>\n  </section>\n  <section id=\"faq\">\n    <h2>4. 常见问题</h2>\n    <p>收集部署与升级中的高频问题。</p>\n    <p style=\"margin-top:40px\">FAQ 列表略。</p>\n  </section>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h1>Kole UI · AnchorNav 组件（纯 H5）</h1>\n<p>对齐 AnchorNav 规范：右侧目录、滚动高亮、层级嵌套、点击平滑滚动</p>\n<nav class=\"kole-anchor fixed\"></nav>\n<section id=\"intro\">\n  <h2>1. 产品简介</h2>\n  <p>本系统是一套企业级中后台解决方案……（长文本占位，可滚动测试高亮）</p>\n  <p style=\"margin-top:40px\">更多内容用于撑高页面，方便观察当前章节高亮效果。</p>\n</section>\n<section id=\"install\">\n  <h2>2. 安装与初始化</h2>\n  <p>通过 npm 安装后，在入口文件引入主题与组件库。</p>\n  <p style=\"margin-top:40px\">配置项说明略。</p>\n</section>\n<section id=\"guide\">\n  <h2>3. 开发指南</h2>\n  <p>包含布局、主题与国际化三部分。</p>\n  <div id=\"layout\" style=\"margin-top:16px\">\n    <h3>3.1 布局</h3>\n    <p>侧边栏 + 顶栏的经典后台布局。</p>\n  </div>\n  <div id=\"theme\" style=\"margin-top:16px\">\n    <h3>3.2 主题</h3>\n    <p>通过 CSS 变量统一调整品牌色。</p>\n  </div>\n</section>\n<section id=\"faq\">\n  <h2>4. 常见问题</h2>\n  <p>收集部署与升级中的高频问题。</p>\n  <p style=\"margin-top:40px\">FAQ 列表略。</p>\n</section>",
    "jsx": "import { KoleAnchorNav } from 'kole-ui/react';\n\n/* key 需与页面中锚点元素的 id 一一对应 */\nconst ITEMS = [\n  { key: 'intro', label: '产品简介' },\n  { key: 'install', label: '安装与初始化' },\n  { key: 'guide', label: '开发指南', children: [\n    { key: 'layout', label: '布局' },\n    { key: 'theme', label: '主题' },\n  ] },\n  { key: 'faq', label: '常见问题' },\n];\n\n<KoleAnchorNav items={ITEMS} fixed offset={24} />",
    "vue3": "<template>\n  <KoleAnchorNav class=\"kole-anchor\" :items=\"ITEMS\" fixed :offset=\"24\" />\n</template>\n\n<script setup>\nimport { KoleAnchorNav } from 'kole-ui/vue3';\n\n/* key 需与页面中锚点元素的 id 一一对应 */\nconst ITEMS = [\n  { key: 'intro', label: '产品简介' },\n  { key: 'install', label: '安装与初始化' },\n  { key: 'guide', label: '开发指南', children: [\n    { key: 'layout', label: '布局' },\n    { key: 'theme', label: '主题' }\n  ] },\n  { key: 'faq', label: '常见问题' }\n];\n</script>",
    "vue2": "<template>\n  <KoleAnchorNav class=\"kole-anchor\" :items=\"ITEMS\" fixed :offset=\"24\" />\n</template>\n\n<script>\nimport { KoleAnchorNav } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleAnchorNav },\n  data() {\n    return {\n      /* key 需与页面中锚点元素的 id 一一对应 */\n      ITEMS: [\n        { key: 'intro', label: '产品简介' },\n        { key: 'install', label: '安装与初始化' },\n        { key: 'guide', label: '开发指南', children: [\n          { key: 'layout', label: '布局' },\n          { key: 'theme', label: '主题' }\n        ] },\n        { key: 'faq', label: '常见问题' }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleAnchorNav } from 'kole-ui/react';\n\ninterface AnchorItem {\n  key: string;\n  label: string;\n  children?: ReadonlyArray<AnchorItem>;\n}\n\n/* key 需与页面中锚点元素的 id 一一对应 */\nconst ITEMS: ReadonlyArray<AnchorItem> = [\n  { key: 'intro', label: '产品简介' },\n  { key: 'install', label: '安装与初始化' },\n  { key: 'guide', label: '开发指南', children: [\n    { key: 'layout', label: '布局' },\n    { key: 'theme', label: '主题' },\n  ] },\n  { key: 'faq', label: '常见问题' },\n];\n\nconst offset: number = 24;\n\n<KoleAnchorNav items={ITEMS} fixed offset={offset} />",
    "vue3ts": "<template>\n  <KoleAnchorNav class=\"kole-anchor\" :items=\"ITEMS\" fixed :offset=\"offset\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleAnchorNav } from 'kole-ui/vue3';\n\ninterface AnchorItem {\n  key: string;\n  label: string;\n  children?: ReadonlyArray<AnchorItem>;\n}\n\n/* key 需与页面中锚点元素的 id 一一对应 */\nconst ITEMS: ReadonlyArray<AnchorItem> = [\n  { key: 'intro', label: '产品简介' },\n  { key: 'install', label: '安装与初始化' },\n  { key: 'guide', label: '开发指南', children: [\n    { key: 'layout', label: '布局' },\n    { key: 'theme', label: '主题' },\n  ] },\n  { key: 'faq', label: '常见问题' },\n];\n\nconst offset: number = 24;\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KoleAnchorNav class=\"kole-anchor\" :items=\"ITEMS\" fixed :offset=\"offset\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleAnchorNav } from 'kole-ui/vue2';\n\ninterface AnchorItem {\n  key: string;\n  label: string;\n  children?: ReadonlyArray<AnchorItem>;\n}\n\nexport default Vue.extend({\n  components: { KoleAnchorNav },\n  data(): { ITEMS: ReadonlyArray<AnchorItem>; offset: number } {\n    return {\n      /* key 需与页面中锚点元素的 id 一一对应 */\n      ITEMS: [\n        { key: 'intro', label: '产品简介' },\n        { key: 'install', label: '安装与初始化' },\n        { key: 'guide', label: '开发指南', children: [\n          { key: 'layout', label: '布局' },\n          { key: 'theme', label: '主题' },\n        ] },\n        { key: 'faq', label: '常见问题' },\n      ],\n      offset: 24,\n    };\n  },\n});\n</script>"
   },
   "notes": [
    "依据 frameworks/AnchorNav.html 内联脚本的 ITEMS 数组（key/label/children 三级嵌套）与静态标记 nav class=kole-anchor fixed；items/fixed/offset 见 AnchorNav.jsx 形参与 AnchorNav.vue3 defineProps。key 取值对应演示页 section 的 id。",
    "TS 形态依据 TS-VARIANTS.md：tsx 用递归 interface AnchorItem（children 自引用）+ offset: number（offset 见 AnchorNav.jsx 形参）；vue3ts/vue2ts 用 <script lang=\"ts\"> + ReadonlyArray<AnchorItem>；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  }
 ],
 "curated": true
}