{
 "curated": true,
 "slug": "pagination",
 "mode": "scenarios",
 "examples": [
  {
   "id": "pagination-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-pagination\">\n    <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n      <button class=\"kole-pagination-page\" type=\"button\" data-prev>上一页</button>\n      <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n      <button class=\"kole-pagination-page\" type=\"button\">2</button>\n      <button class=\"kole-pagination-page\" type=\"button\" data-next>下一页</button>\n      <span class=\"kole-pagination-desc\">共 128 条</span>\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-pagination\">\n  <div class=\"kole-pagination-pager\" aria-label=\"分页\">\n    <button class=\"kole-pagination-page\" type=\"button\">上一页</button>\n    <button class=\"kole-pagination-page is-current\" type=\"button\">1</button>\n    <button class=\"kole-pagination-page\" type=\"button\">2</button>\n    <button class=\"kole-pagination-page\" type=\"button\">下一页</button>\n    <span class=\"kole-pagination-desc\">共 128 条</span>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [page, setPage] = useState(1);\n\n  return (\n    <KolePagination\n      total={128}\n      page={page}\n      pageSize={10}\n      size=\"default\"\n      onChange={setPage}\n    />\n  );\n}",
    "vue3": "<template>\n  <KolePagination\n    :total=\"128\"\n    :page=\"page\"\n    :page-size=\"10\"\n    size=\"default\"\n    @change=\"page = $event\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\nconst page = ref(1);\n</script>",
    "vue2": "<template>\n  <KolePagination\n    :total=\"total\"\n    :page=\"page\"\n    :page-size=\"pageSize\"\n    size=\"default\"\n    @change=\"onChange\"\n  />\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePagination },\n  data() {\n    return { total: 128, page: 1, pageSize: 10 };\n  },\n  methods: {\n    onChange(value) {\n      this.page = value;\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nconst config: PaginationState = {\n  total: 128,\n  pageSize: 10,\n  size: 'default',\n};\n\nexport default function PaginationDefaultDemo(): JSX.Element {\n  const [page, setPage] = useState<number>(1);\n\n  return (\n    <KolePagination\n      total={config.total}\n      page={page}\n      pageSize={config.pageSize}\n      size={config.size}\n      onChange={setPage}\n    />\n  );\n}",
    "vue3ts": "<template>\n  <KolePagination\n    :total=\"config.total\"\n    :page=\"page\"\n    :page-size=\"config.pageSize\"\n    :size=\"config.size\"\n    @change=\"page = $event\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nconst config: PaginationState = {\n  total: 128,\n  pageSize: 10,\n  size: 'default',\n};\nconst page = ref<number>(1);\n</script>",
    "vue2ts": "<template>\n  <div>\n    <KolePagination\n      :total=\"config.total\"\n      :page=\"page\"\n      :page-size=\"config.pageSize\"\n      :size=\"config.size\"\n      @change=\"onChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePagination } from 'kole-ui/vue2';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nexport default Vue.extend({\n  components: { KolePagination },\n  data(): { config: PaginationState; page: number } {\n    return {\n      config: { total: 128, pageSize: 10, size: 'default' },\n      page: 1,\n    };\n  },\n  methods: {\n    onChange(value: number): void {\n      this.page = value;\n    },\n  },\n});\n</script>"
   },
   "notes": "依据 frameworks/Pagination.html:6 的 kole-pagination-pager（上一页 / 1 / 2 / 下一页 + \"共 128 条\"），total=128、pageSize=10、size='default' 取自 frameworks/Pagination.jsx 的参数默认值，size 取值对齐 site/details/pagination.json contract.dims.size"
  },
  {
   "id": "pagination-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-pagination\">\n    <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n    <span class=\"kole-pagination-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-pagination\">\n  <div class=\"kole-pagination-surface\" style=\"padding:12px\">在表格或卡片列表底部浏览大数据集，支持页码、总数、每页条数和跳转。</div>\n  <span class=\"kole-pagination-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\nexport default function Demo() {\n  const [page, setPage] = useState(3);\n\n  return (\n    <>\n      <div className=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n      <KolePagination\n        size=\"small\"\n        total={240}\n        page={page}\n        pageSize={20}\n        onChange={setPage}\n        onLoadMore={() => setPage(page + 1)}\n      />\n    </>\n  );\n}",
    "vue3": "<template>\n  <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n  <KolePagination\n    size=\"small\"\n    :total=\"240\"\n    :page=\"page\"\n    :page-size=\"pageSize\"\n    @change=\"page = $event\"\n    @sizechange=\"pageSize = $event\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\nconst page = ref(3);\nconst pageSize = ref(20);\n</script>",
    "vue2": "<template>\n  <div class=\"kole-pagination-surface\">\n    <KolePagination\n      size=\"small\"\n      :total=\"240\"\n      :page=\"page\"\n      :page-size=\"20\"\n      @pagechange=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KolePagination } from 'kole-ui/vue2';\n\nexport default {\n  components: { KolePagination },\n  data() {\n    return { page: 3 };\n  },\n  methods: {\n    onPageChange(value) { this.page = value; }\n  }\n};\n</script>",
    "tsx": "import { useCallback, useState } from 'react';\nimport { KolePagination } from 'kole-ui/react';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nconst config: PaginationState = {\n  total: 240,\n  pageSize: 20,\n  size: 'small',\n};\n\nexport default function PaginationOrdersDemo(): JSX.Element {\n  const [page, setPage] = useState<number>(3);\n  const onLoadMore = useCallback((): void => {\n    setPage((current) => current + 1);\n  }, []);\n\n  return (\n    <>\n      <div className=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n      <KolePagination\n        size={config.size}\n        total={config.total}\n        page={page}\n        pageSize={config.pageSize}\n        onChange={setPage}\n        onLoadMore={onLoadMore}\n      />\n    </>\n  );\n}",
    "vue3ts": "<template>\n  <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n  <KolePagination\n    :size=\"config.size\"\n    :total=\"config.total\"\n    :page=\"page\"\n    :page-size=\"pageSize\"\n    @change=\"page = $event\"\n    @sizechange=\"pageSize = $event\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { KolePagination } from 'kole-ui/vue3';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nconst config: PaginationState = {\n  total: 240,\n  pageSize: 20,\n  size: 'small',\n};\nconst page = ref<number>(3);\nconst pageSize = ref<number>(config.pageSize);\n</script>",
    "vue2ts": "<template>\n  <div>\n    <div class=\"kole-pagination-surface\">订单列表底部：支持键盘焦点与状态反馈</div>\n    <KolePagination\n      :size=\"config.size\"\n      :total=\"config.total\"\n      :page=\"page\"\n      :page-size=\"config.pageSize\"\n      @pagechange=\"onPageChange\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KolePagination } from 'kole-ui/vue2';\n\ntype PaginationSize = 'large' | 'default' | 'small';\ninterface PaginationState {\n  total: number;\n  pageSize: number;\n  size: PaginationSize;\n}\n\nexport default Vue.extend({\n  components: { KolePagination },\n  data(): { config: PaginationState; page: number } {\n    return {\n      config: { total: 240, pageSize: 20, size: 'small' },\n      page: 3,\n    };\n  },\n  methods: {\n    onPageChange(value: number): void {\n      this.page = value;\n    },\n  },\n});\n</script>"
   },
   "notes": "依据 frameworks/Pagination.html:6 的 kole-pagination-surface + kole-pagination-desc（\"支持键盘焦点、状态反馈和令牌化样式\"）与 site/details/pagination.json contract.dims.size=small|default|large；Vue3 端 sizechange、pagechange 为 frameworks/Pagination.vue3.vue 的 defineEmits，Vue2 端 frameworks/Pagination.vue2.vue 只 $emit input/change/pagechange，onLoadMore 取自 frameworks/Pagination.jsx 参数表"
  }
 ]
}