{"slug":"backtotop","mode":"single","examples":[{"id":"backtotop-ex-1","title":"这里是长内容占位区……","titleSrc":"demo","desc":"","html":"<div class=\"kole-demo-banner\">\n  <h2>向下滚动页面</h2>\n  <p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>\n</div>\n<div class=\"kole-demo-spacer\">这里是长内容占位区……</div>\n<div class=\"kole-backtop kole-no-ring\" id=\"backtopPlain\" role=\"button\" aria-label=\"返回顶部（无进度环）\" style=\"left:24px;right:auto;display:flex\">\n  <span class=\"kole-backtop-arrow\" aria-hidden=\"true\">↑</span>\n</div>\n<div class=\"kole-backtop\" id=\"backtop\" role=\"button\" aria-label=\"返回顶部\">\n  <svg viewBox=\"0 0 44 44\">\n    <circle class=\"kole-backtop-ring-bg\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n    <circle class=\"kole-backtop-ring-fg\" id=\"ring\" role=\"button\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n  </svg>\n  <span class=\"kole-backtop-arrow\" aria-label=\"返回顶部\">↑</span>\n</div>","preview":{"show":[[0],[1],[2],[3]],"hide":[],"mode":"single"},"previewSafe":true,"previewUnsafeReasons":[],"source":"api-derived","code":{"html":"<h2>向下滚动页面</h2>\n<p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>\n<div>这里是长内容占位区……</div>\n<div class=\"kole-backtop kole-no-ring\" id=\"backtopPlain\" role=\"button\" aria-label=\"返回顶部（无进度环）\" style=\"left:24px;right:auto;display:flex\">\n  <span class=\"kole-backtop-arrow\" aria-hidden=\"true\">↑</span>\n</div>\n<div class=\"kole-backtop\" role=\"button\" aria-label=\"返回顶部\">\n  <svg viewBox=\"0 0 44 44\">\n    <circle class=\"kole-backtop-ring-bg\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n    <circle class=\"kole-backtop-ring-fg\" role=\"button\" aria-label=\"返回顶部\" cx=\"22\" cy=\"22\" fill=\"none\" r=\"20\" stroke-width=\"2\"></circle>\n  </svg>\n  <span class=\"kole-backtop-arrow\" aria-label=\"返回顶部\">↑</span>\n</div>","jsx":"import { KoleBackToTop } from 'kole-ui/react';\n\n<KoleBackToTop />","vue3":"<template>\n  <KoleBackToTop />\n</template>\n\n<script setup>\nimport { KoleBackToTop } from 'kole-ui/vue3';\n</script>","vue2":"<template>\n  <KoleBackToTop />\n</template>\n\n<script>\nimport { KoleBackToTop } from 'kole-ui/vue2';\nexport default { components: { KoleBackToTop } };\n</script>"},"notes":["演示页标记只含页面结构，未含可映射的组件属性","演示页未含可映射的调用标记，本片段依据组件 API 表推导"]}]}