{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/pagination","result":{"data":{"current":{"frontmatter":{"title":"Pagination 翻页器","order":58,"brief":"分页器帮助用户在多个页之间进行导航","icon":"doc-pagination"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本","title":"基本"},{"url":"#禁用","title":"禁用"},{"url":"#总页数显示","title":"总页数显示"},{"url":"#指定当前页码","title":"指定当前页码"},{"url":"#每页容量切换","title":"每页容量切换"},{"url":"#快速跳转至某页","title":"快速跳转至某页"},{"url":"#页码受控","title":"页码受控"},{"url":"#预设每页容量可选值","title":"预设每页容量可选值"},{"url":"#迷你版本","title":"迷你版本"}]},{"url":"#api-参考","title":"API 参考"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#设计变量","title":"设计变量"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 58,\n  \"category\": \"导航类\",\n  \"title\": \"Pagination 翻页器\",\n  \"icon\": \"doc-pagination\",\n  \"width\": \"60%\",\n  \"brief\": \"分页器帮助用户在多个页之间进行导航\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Pagination } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u7840\\u5206\\u9875\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"total\"), \" \\u8BBE\\u7F6E\\u603B\\u6761\\u6570\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pageSize\"), \" \\u8BBE\\u7F6E\\u6BCF\\u9875\\u5BB9\\u91CF\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=60%\",\n    \"live\": \"true\",\n    \"width\": \"60%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={30} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={80} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={200} style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={80} pageSize={30} style={{ marginBottom: 12 }}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7981\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"disabled\"), \" \\u8BBE\\u7F6E\\u7981\\u7528\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=60%\",\n    \"live\": \"true\",\n    \"width\": \"60%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={30} disabled style={{ marginBottom: 12 }}></Pagination>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u603B\\u9875\\u6570\\u663E\\u793A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showTotal\"), \" \\u5C5E\\u6027\\u63A7\\u5236\\u662F\\u5426\\u5C55\\u793A\\u603B\\u9875\\u6570\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showTotal style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={200} showTotal style={{ marginBottom: 12 }}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6307\\u5B9A\\u5F53\\u524D\\u9875\\u7801\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultCurrentPage\"), \" \\u6307\\u5B9A\\u5F53\\u524D\\u6FC0\\u6D3B\\u7684\\u9875\\u7801\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showTotal defaultCurrentPage={3}></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6BCF\\u9875\\u5BB9\\u91CF\\u5207\\u6362\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showSizeChanger\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \"\\uFF0C\\u5141\\u8BB8\\u901A\\u8FC7 Select \\u7EC4\\u4EF6\\u5FEB\\u901F\\u5207\\u6362\\u6BCF\\u9875\\u5BB9\\u91CF\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showSizeChanger style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={300} showSizeChanger></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5FEB\\u901F\\u8DF3\\u8F6C\\u81F3\\u67D0\\u9875\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showQuickJumper\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \", \\u5141\\u8BB8\\u901A\\u8FC7Input\\u63A7\\u4EF6\\u8F93\\u5165\\u9875\\u7801\\uFF0C\\u5FEB\\u901F\\u8DF3\\u8F6C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5F53Input\\u5931\\u53BB\\u7126\\u70B9\\u65F6\\uFF0C\\u82E5Input\\u4E2D\\u4E3A\\u6709\\u6548\\u6570\\u5B57\\uFF0C\\u4F1A\\u76F4\\u63A5\\u8FDB\\u884C\\u8DF3\\u8F6C\\u3002\\u4F60\\u4EA6\\u53EF\\u5728Input\\u805A\\u7126\\u65F6\\uFF0C\\u8F93\\u5165\\u671F\\u671B\\u8DF3\\u8F6C\\u7684\\u9875\\u7801\\u540E\\u76F4\\u63A5\\u6572\\u51FB\\u56DE\\u8F66\\u8FDB\\u884C\\u8DF3\\u8F6C\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u82E5\\u4F60\\u8F93\\u5165\\u9875\\u7801\\u5927\\u4E8E\\u5206\\u9875\\u5668\\u603B\\u9875\\u6570\\uFF0C\\u6211\\u4EEC\\u4F1A\\u81EA\\u52A8\\u4E3A\\u4F60\\u8DF3\\u8F6C\\u81F3\\u6700\\u540E\\u4E00\\u9875\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"showQuickJumper\\u4E8E v1.31\\u540E\\u63D0\\u4F9B\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination total={80} showQuickJumper style={{ marginBottom: 12 }}></Pagination>\\n        <Pagination total={300} showQuickJumper></Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9875\\u7801\\u53D7\\u63A7\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"currentPage\"), \" \\u540E\\uFF0C\\u5206\\u9875\\u5668\\u5373\\u4E3A\\u53D7\\u63A7\\u7EC4\\u4EF6\\uFF0C\\u4E00\\u822C\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onPageChange\"), \" \\u4F7F\\u7528\\u3002\\u5F53\\u524D\\u6FC0\\u6D3B\\u9875\\u7801\\u5B8C\\u5168\\u53D6\\u51B3\\u4E8E\\u4F20\\u5165\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"currentPage\"), \"\\u7684 \\u503C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=60%\",\n    \"live\": \"true\",\n    \"width\": \"60%\"\n  }, \"import React, { useState } from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [page, setPage] = useState(3);\\n    function onPageChange(currentPage) {\\n        setPage(currentPage);\\n    }\\n    return (\\n        <Pagination\\n            total={200}\\n            currentPage={page}\\n            onPageChange={onPageChange}>\\n        </Pagination>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u9884\\u8BBE\\u6BCF\\u9875\\u5BB9\\u91CF\\u53EF\\u9009\\u503C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"pageSizeOpts\"), \" \\u6570\\u7EC4\\uFF0C\\u6307\\u5B9A\\u5207\\u6362\\u6BCF\\u9875\\u5BB9\\u91CF\\u7684\\u53EF\\u9009\\u503C\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=55%\",\n    \"live\": \"true\",\n    \"width\": \"55%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <div>\\n        <Pagination\\n            total={300}\\n            showSizeChanger\\n            style={{ marginBottom: 12 }}\\n            pageSizeOpts={[50, 80, 90, 200]}>\\n        </Pagination>\\n        <Pagination\\n            total={300}\\n            showSizeChanger\\n            pageSizeOpts={[10, 20, 50, 200]}>\\n        </Pagination>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8FF7\\u4F60\\u7248\\u672C\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"size\"), \" \\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"small\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={90} size=\\\"small\\\"></Pagination>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F00\\u542F hoverShowPageSelect\\uFF0C\\u53EF\\u4EE5 hover \\u9875\\u7801\\u5FEB\\u901F\\u5207\\u6362\\uFF08v1.27.0\\u540E\\u63D0\\u4F9B\\uFF09\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=50%\",\n    \"live\": \"true\",\n    \"width\": \"50%\"\n  }, \"import React from 'react';\\nimport { Pagination } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Pagination total={90} size=\\\"small\\\" hoverShowPageSelect></Pagination>\\n);\\n\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u9875\\u7801\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultCurrentPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u7684\\u5F53\\u524D\\u9875\\u7801\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.37.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hideOnSinglePage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u603B\\u9875\\u6570\\u5C0F\\u4E8E 2 \\u65F6\\uFF0C\\u662F\\u5426\\u81EA\\u52A8\\u9690\\u85CF\\u5206\\u9875\\u5668\\uFF0C\\u5F53 showSizeChanger \\u4E3Atrue\\u65F6\\uFF0C\\u6B64\\u5F00\\u5173\\u4E0D\\u518D\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hoverShowPageSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hover \\u9875\\u7801\\u65F6\\u662F\\u5426\\u5C55\\u793A\\u5207\\u6362\\u9875\\u6570\\u7684Select\\u63A7\\u4EF6\\uFF0C\\u4EC5\\u5F53 size = 'small'\\u65F6\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"nextText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u4E00\\u9875\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pageSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u9875\\u6761\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"pageSizeOpts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u6BCF\\u9875\\u663E\\u793A\\u591A\\u5C11\\u6761\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"array\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", \"10, 20, 40, 100\", \"]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popoverPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D6E\\u5C42\\u65B9\\u5411\\uFF0C\\u5177\\u4F53\\u53EF\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/show/popover#API%E5%8F%82%E8%80%83\"\n  }, \"Popover\\xB7API \\u53C2\\u8003\\xB7position\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"bottomLeft\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"popoverZIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6D6E\\u5C42 z-index \\u503C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1030\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prevText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4E00\\u9875\\u6587\\u672C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preventPageChangeOnPageSizeChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362 pageSize \\u65F6\\u662F\\u5426\\u963B\\u6B62\\u81EA\\u52A8\\u8C03\\u6574 currentPage\\u3002\\u9ED8\\u8BA4\\u60C5\\u51B5\\u4E0B\\uFF0C\\u5207\\u6362 pageSize \\u65F6\\u7EC4\\u4EF6\\u4F1A\\u81EA\\u52A8\\u8BA1\\u7B97\\u65B0\\u7684 currentPage \\u4EE5\\u4FDD\\u6301\\u5F53\\u524D\\u6570\\u636E\\u4F4D\\u7F6E\\uFF0C\\u8BBE\\u4E3A true \\u540E\\u7531\\u7528\\u6237\\u81EA\\u884C\\u63A7\\u5236\\u9875\\u7801\\u53D8\\u5316\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"size\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTotal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u603B\\u9875\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showSizeChanger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u5207\\u6362\\u9875\\u5BB9\\u91CF\\u7684 Select\\uFF0Csize\\u4E3Asmall\\u65F6\\u4E0D\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showQuickJumper\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u5207\\u6362\\u9875\\u7801\\u7684 Input\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.31.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"total\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u603B\\u6761\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9875\\u7801\\u3001\\u6BCF\\u9875\\u5BB9\\u91CF\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(currentPage: number, pageSize: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPageChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9875\\u7801\\u53D8\\u5316\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(currentPage: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPageSizeChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6BCF\\u9875\\u5BB9\\u91CF\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(pageSize: number)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \": \\u63CF\\u8FF0\\u7EC4\\u4EF6\\u5185\\u9875\\u7801\\u3001\\u524D\\u4E00\\u9875\\u3001\\u540E\\u4E00\\u9875\\u7B49\\u5143\\u7D20\\u7684\\u6807\\u7B7E\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-current\"), \": \\u6307\\u5411\\u5F53\\u524D\\u9875\\u7684\\u9875\\u7801\\u5143\\u7D20\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u9875\\u6570\\u4E0B\\u62C9\\u9009\\u62E9\\u5668\\u6700\\u591A\\u53EA\\u6709\", mdx(\"inlineCode\", {\n    parentName: \"strong\"\n  }, \"1,000,000\"), \"\\u6761\\uFF1F\"), mdx(\"br\", {\n    parentName: \"li\"\n  }), \"\\u56E0\\u4E3A\\u521B\\u5EFA\\u5217\\u8868\\u65F6, \\u6D4F\\u89C8\\u5668\\u5BF9Array.from()\\u521B\\u5EFA\\u6570\\u7EC4\\u7684\\u5927\\u5C0F\\u5B58\\u5728\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Errors/Invalid_array_length\"\n  }, \"\\u9650\\u5236\"), \"; \\u540C\\u65F6\\u4E3A\\u4E86\\u517C\\u987EArray.from()\\u7684\\u5F00\\u9500\\uFF0C\\u6211\\u4EEC\\u8BBE\\u5B9A\\u4E86\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"1,000,000\"), \"\\u8FD9\\u4E2A\\u9608\\u503C\\u3002\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/pagination","next":{"fields":{"slug":"en-US/navigation/steps"},"id":"56c27928-ab99-5c6c-8ecc-ec987b65c5b8","frontmatter":{"title":"Steps","localeCode":"en-US","icon":"doc-steps","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/pagination"},"id":"0a3561f2-9d50-53ea-883f-5faf8cf6441e","frontmatter":{"title":"Pagination","localeCode":"en-US","icon":"doc-pagination","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}