40 lines
7.5 KiB
JSON
40 lines
7.5 KiB
JSON
{
|
||
"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
|
||
}
|