{"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":"api-derived","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<KoleAnchorNav />","vue3":"<template>\n  <KoleAnchorNav />\n</template>\n\n<script setup>\nimport { KoleAnchorNav } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleAnchorNav />\n</template>\n\n<script>\nimport { KoleAnchorNav } from 'kole-ui/vue2';\nexport default { components: { KoleAnchorNav } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}