{
 "slug": "infinitescroll",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "infinitescroll-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-infinitescroll\">\n    <div class=\"kole-infinitescroll-scroll\" role=\"feed\" aria-label=\"动态列表\">\n      <div class=\"kole-infinitescroll-scroll-item\">活动记录 1</div>\n      <div class=\"kole-infinitescroll-scroll-item\">活动记录 2</div>\n      <button class=\"kole-infinitescroll-button\" type=\"button\" data-load>加载更多</button>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-infinitescroll\">\n  <div class=\"kole-infinitescroll-scroll\" role=\"feed\" aria-label=\"动态列表\">\n    <div class=\"kole-infinitescroll-scroll-item\">活动记录 1</div>\n    <div class=\"kole-infinitescroll-scroll-item\">活动记录 2</div>\n    <button class=\"kole-infinitescroll-button\" type=\"button\">加载更多</button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleInfiniteScroll } from 'kole-ui/react';\n\nfunction Demo() {\n  const [items, setItems] = useState(['活动记录 1', '活动记录 2']);\n  const [loading, setLoading] = useState(false);\n  const [status, setStatus] = useState('more');\n\n  function loadMore() {\n    setLoading(true);\n    setTimeout(() => {\n      setItems((prev) => {\n        const next = prev.concat('活动记录 ' + (prev.length + 1));\n        if (next.length >= 3) setStatus('done');\n        return next;\n      });\n      setLoading(false);\n    }, 600);\n  }\n\n  return (\n    <KoleInfiniteScroll\n      items={items}\n      loading={loading}\n      status={status}\n      height=\"180px\"\n      onLoadMore={loadMore}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleInfiniteScroll\n    :items=\"items\"\n    :loading=\"loading\"\n    :status=\"status\"\n    height=\"180px\"\n    @load=\"loadMore\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ref(['活动记录 1', '活动记录 2']);\nconst loading = ref(false);\nconst status = ref('more');\n\nfunction loadMore() {\n  loading.value = true;\n  setTimeout(() => {\n    items.value = items.value.concat('活动记录 ' + (items.value.length + 1));\n    if (items.value.length >= 3) status.value = 'done';\n    loading.value = false;\n  }, 600);\n}\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInfiniteScroll\n      :items=\"items\"\n      :loading=\"loading\"\n      :status=\"status\"\n      height=\"180px\"\n      @load=\"loadMore\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInfiniteScroll },\n  data() {\n    return {\n      items: ['活动记录 1', '活动记录 2'],\n      loading: false,\n      status: 'more',\n    };\n  },\n  methods: {\n    loadMore() {\n      var self = this;\n      self.loading = true;\n      setTimeout(function () {\n        self.items = self.items.concat('活动记录 ' + (self.items.length + 1));\n        if (self.items.length >= 3) self.status = 'done';\n        self.loading = false;\n      }, 600);\n    },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleInfiniteScroll } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [items, setItems] = useState(['活动记录 1', '活动记录 2']);\n  const [loading, setLoading] = useState<boolean>(false);\n  const [status, setStatus] = useState<string>('more');\n\n  function loadMore(): JSX.Element {\n    setLoading(true);\n    setTimeout(() => {\n      setItems((prev) => {\n        const next = prev.concat('活动记录 ' + (prev.length + 1));\n        if (next.length >= 3) setStatus('done');\n        return next;\n      });\n      setLoading(false);\n    }, 600);\n  }\n\n  return (\n    <KoleInfiniteScroll\n      items={items}\n      loading={loading}\n      status={status}\n      height=\"180px\"\n      onLoadMore={loadMore}\n    />\n  );\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleInfiniteScroll\n    :items=\"items\"\n    :loading=\"loading\"\n    :status=\"status\"\n    height=\"180px\"\n    @load=\"loadMore\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ref(['活动记录 1', '活动记录 2']);\nconst loading = ref<boolean>(false);\nconst status = ref<string>('more');\n\nfunction loadMore() {\n  loading.value = true;\n  setTimeout(() => {\n    items.value = items.value.concat('活动记录 ' + (items.value.length + 1));\n    if (items.value.length >= 3) status.value = 'done';\n    loading.value = false;\n  }, 600);\n}\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInfiniteScroll\n      :items=\"items\"\n      :loading=\"loading\"\n      :status=\"status\"\n      height=\"180px\"\n      @load=\"loadMore\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInfiniteScroll },\n  data(): Record<string, unknown> {\n    return {\n      items: ['活动记录 1', '活动记录 2'],\n      loading: false,\n      status: 'more',\n    };\n  },\n  methods: {\n    loadMore(): void {\n      var self = this;\n      self.loading = true;\n      setTimeout(function () {\n        self.items = self.items.concat('活动记录 ' + (self.items.length + 1));\n        if (self.items.length >= 3) self.status = 'done';\n        self.loading = false;\n      }, 600);\n    },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/InfiniteScroll.html 内联脚本：点击 [data-load] 追加一条「活动记录 3」后把按钮置为已加载；对应 props items/loading/status/height 与 onLoadMore（见 frameworks/InfiniteScroll.jsx 的 status='more' 分支文案「加载更多 / 加载中… / 已全部加载」）"
   ]
  },
  {
   "id": "infinitescroll-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-infinitescroll\">\n    <div class=\"kole-infinitescroll-surface\" style=\"padding:12px\">逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。</div>\n    <span class=\"kole-infinitescroll-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-infinitescroll\">\n  <div class=\"kole-infinitescroll-surface\" style=\"padding:12px\">逐批加载动态流或长列表，明确展示加载中、完成和可重试状态。</div>\n  <span class=\"kole-infinitescroll-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleInfiniteScroll } from 'kole-ui/react';\n\n<>\n  <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} status=\"more\" height=\"180px\" />\n  <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} loading status=\"loading\" height=\"180px\" />\n  <KoleInfiniteScroll items={['活动记录 1', '活动记录 2', '活动记录 3']} status=\"done\" height=\"180px\" />\n</>",
    "vue3": "<template>\n  <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n  <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n  <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n</template>\n\n<script setup>\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst items = ['活动记录 1', '活动记录 2'];\nconst done = ['活动记录 1', '活动记录 2', '活动记录 3'];\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n    <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n    <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInfiniteScroll },\n  data() {\n    return {\n      items: ['活动记录 1', '活动记录 2'],\n      done: ['活动记录 1', '活动记录 2', '活动记录 3'],\n    };\n  }\n};\n</script>",
    "tsx": "import { KoleInfiniteScroll } from 'kole-ui/react';\n\nexport default function KoleInfiniteScrollDemo(): JSX.Element {\n  return (\n    <>\n      <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} status=\"more\" height=\"180px\" />\n      <KoleInfiniteScroll items={['活动记录 1', '活动记录 2']} loading status=\"loading\" height=\"180px\" />\n      <KoleInfiniteScroll items={['活动记录 1', '活动记录 2', '活动记录 3']} status=\"done\" height=\"180px\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n  <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n  <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInfiniteScroll } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\nconst items = ['活动记录 1', '活动记录 2'];\nconst done = ['活动记录 1', '活动记录 2', '活动记录 3'];\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInfiniteScroll :items=\"items\" status=\"more\" height=\"180px\" />\n    <KoleInfiniteScroll :items=\"items\" loading status=\"loading\" height=\"180px\" />\n    <KoleInfiniteScroll :items=\"done\" status=\"done\" height=\"180px\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInfiniteScroll } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInfiniteScroll },\n  data(): Record<string, unknown> {\n    return {\n      items: ['活动记录 1', '活动记录 2'],\n      done: ['活动记录 1', '活动记录 2', '活动记录 3'],\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/InfiniteScroll.jsx 的 status 三态分支（more/loading/done 对应按钮文案「加载更多 / 加载中… / 已全部加载」）与演示页 section「状态与使用场景」的文案；status 取值见 data.json contract dims status:[more,loading,done]"
   ]
  }
 ]
}