@uiw/doc/web/static/js/5922.d8728a13.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[5922],{4934:e=>{function n(e){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}n.keys=()=>[],n.resolve=n,n.id=4934,e.exports=n},5301:(e,n,t)=>{"use strict";t.d(n,{Z:()=>m});var r=t(8573),a=t(6320),i=t(8563),o=t(7622),u=t(7937);const l={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=t(4760);function g(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:n}=e,t=/^http/.test(n||"")?n:"https://github.com/uiwjs/uiw/blob/master/".concat(n);return(0,c.jsxs)("div",{className:l.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",t&&(0,c.jsx)("a",{href:t,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=a.ZP.Preview,p=a.ZP.Code,s=a.ZP.Toolbar,f=e=>{var n,t;let{node:o,components:u,data:l,...g}=e;const f=(0,r.useRef)(null),{headings:m,headingsList:_,...v}=g;(0,r.useEffect)((()=>{if(f.current){const e=f.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(f.current,e)}}),[f]);const b=null===o||void 0===o||null===(n=o.position)||void 0===n?void 0:n.start.line,h=null===o||void 0===o||null===(t=o.data)||void 0===t?void 0:t.meta,S=(0,i.Mx)(h)||String(b),P=u["".concat(S)];if(S&&"function"===typeof P){const e=l[S].value||"",n=(0,i.aE)(h||"");return(0,c.jsxs)(a.ZP,{ref:f,children:[(0,c.jsx)(d,{style:{background:n.bg||"transparent"},children:(0,c.jsx)(P,{})}),(0,c.jsx)(s,{text:e,children:n.title||"Example"}),(0,c.jsx)(p,{children:(0,c.jsx)("pre",{...v})})]})}return(0,c.jsx)("code",{...v})};function m(e){return(0,c.jsxs)(r.Fragment,{children:[(0,c.jsx)(o.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:n=>(0,c.jsx)(f,{...e,...n})}}),(0,c.jsx)(g,{path:e.path})]})}},4513:(e,n,t)=>{"use strict";t.r(n),t.d(n,{default:()=>o});const r={components:{19:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);function a(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,a,i,o,u=[],l=!0,c=!1;try{if(i=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;l=!1}else for(;!(l=(r=i.call(t)).done)&&(u.push(r.value),u.length!==n);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=t.return&&(o=t.return(),Object(o)!==o))return}finally{if(c)throw a}}return u}}(e,n)||function(e,n){if(!e)return;if("string"===typeof e)return i(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return i(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}return function(){var e=a(n.default.useState({current:2,pageSize:10}),2),t=e[0],i=e[1];return n.default.createElement("div",null,n.default.createElement(r.Pagination,{current:t.current,pageSize:t.pageSize,total:30,divider:!0,pageSizeOptions:[5,10,20,30],onShowSizeChange:function(e,n){return i({current:e,pageSize:n})}}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:2,pageSize:10,total:38,divider:!0}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:1,pageSize:5,total:249,pageSizeOptions:[5,10,20,30]}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:1,alignment:"center",pageSize:10,total:50}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:1,pageSize:10,total:60,divider:!0}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:1,pageSize:10,total:70,divider:!0}))}}(),58:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.Pagination,{size:"small",current:1,pageSize:5,pageSizeOptions:[5,10,20,30],total:249}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{size:"small",current:1,pageSize:10,total:50}))}}(),77:function(){var e,n=(e=t(8573))&&e.__esModule?e:{default:e},r=t(7937);return function(){return n.default.createElement("div",null,n.default.createElement(r.Pagination,{current:5,total:250,onChange:function(e){console.log("pageNumber:".concat(e))}}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:1,alignment:"center",total:250,onChange:function(e){console.log("pageNumber:".concat(e))}}),n.default.createElement(r.Divider,null),n.default.createElement(r.Pagination,{current:25,alignment:"right",total:250,onChange:function(e){console.log("pageNumber:".concat(e))}}))}}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nreturn function Demo() {\n  var _React$useState = _react["default"].useState({\n      current: 2,\n      pageSize: 10\n    }),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    pageObj = _React$useState2[0],\n    setPageObj = _React$useState2[1];\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: pageObj.current,\n    pageSize: pageObj.pageSize,\n    total: 30,\n    divider: true,\n    pageSizeOptions: [5, 10, 20, 30],\n    onShowSizeChange: function onShowSizeChange(current, pageSize) {\n      return setPageObj({\n        current: current,\n        pageSize: pageSize\n      });\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 2,\n    pageSize: 10,\n    total: 38,\n    divider: true\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 1,\n    pageSize: 5,\n    total: 249,\n    pageSizeOptions: [5, 10, 20, 30]\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 1,\n    alignment: "center",\n    pageSize: 10,\n    total: 50\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 1,\n    pageSize: 10,\n    total: 60,\n    divider: true\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 1,\n    pageSize: 10,\n    total: 70,\n    divider: true\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  const [pageObj, setPageObj] = React.useState({\n    current: 2,\n    pageSize: 10\n  });\n  return (\n    <div>\n      <Pagination\n        current={pageObj.current}\n        pageSize={pageObj.pageSize}\n        total={30}\n        divider\n        pageSizeOptions={[5, 10, 20, 30]}\n        onShowSizeChange={(current, pageSize) => setPageObj({\n          current: current,\n          pageSize: pageSize\n        })}\n      />\n      <Divider />\n      <Pagination current={2} pageSize={10} total={38} divider />\n      <Divider />\n      <Pagination current={1} pageSize={5} total={249} pageSizeOptions={[5, 10, 20, 30]} />\n      <Divider />\n      <Pagination current={1} alignment=\"center\" pageSize={10} total={50} />\n      <Divider />\n      <Pagination current={1} pageSize={10} total={60} divider />\n      <Divider />\n      <Pagination current={1} pageSize={10} total={70} divider />\n    </div>\n  )\n}"},58:{name:58,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    size: "small",\n    current: 1,\n    pageSize: 5,\n    pageSizeOptions: [5, 10, 20, 30],\n    total: 249\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    size: "small",\n    current: 1,\n    pageSize: 10,\n    total: 50\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Pagination size=\"small\" current={1} pageSize={5} pageSizeOptions={[5, 10, 20, 30]} total={249} />\n      <Divider />\n      <Pagination size=\"small\" current={1} pageSize={10} total={50} />\n    </div>\n  );\n}"},77:{name:77,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 5,\n    total: 250,\n    onChange: function onChange(pageNumber) {\n      console.log("pageNumber:".concat(pageNumber));\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 1,\n    alignment: "center",\n    total: 250,\n    onChange: function onChange(pageNumber) {\n      console.log("pageNumber:".concat(pageNumber));\n    }\n  }), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Pagination, {\n    current: 25,\n    alignment: "right",\n    total: 250,\n    onChange: function onChange(pageNumber) {\n      console.log("pageNumber:".concat(pageNumber));\n    }\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Pagination\n        current={5}\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n      <Divider />\n      <Pagination\n        current={1}\n        alignment=\"center\"\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n      <Divider />\n      <Pagination\n        current={25}\n        alignment=\"right\"\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n    </div>\n  );\n}"}},source:"Pagination \u5206\u9875\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-pagination/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-pagination.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-pagination)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-pagination.svg?label=@uiw/react-pagination)](https://npmjs.com/@uiw/react-pagination)\n\n\u5f53\u6570\u636e\u91cf\u8f83\u591a\u65f6\uff0c\u4f7f\u7528\u5206\u9875\u53ef\u4ee5\u5feb\u901f\u8fdb\u884c\u6570\u636e\u5207\u6362\uff0c\u6bcf\u6b21\u53ea\u52a0\u8f7d\u4e00\u4e2a\u9875\u9762\u3002\n\n```jsx\nimport { Pagination } from 'uiw';\n// or\nimport Pagination from '@uiw/react-pagination';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  const [pageObj, setPageObj] = React.useState({\n    current: 2,\n    pageSize: 10\n  });\n  return (\n    <div>\n      <Pagination\n        current={pageObj.current}\n        pageSize={pageObj.pageSize}\n        total={30}\n        divider\n        pageSizeOptions={[5, 10, 20, 30]}\n        onShowSizeChange={(current, pageSize) => setPageObj({\n          current: current,\n          pageSize: pageSize\n        })}\n      />\n      <Divider />\n      <Pagination current={2} pageSize={10} total={38} divider />\n      <Divider />\n      <Pagination current={1} pageSize={5} total={249} pageSizeOptions={[5, 10, 20, 30]} />\n      <Divider />\n      <Pagination current={1} alignment=\"center\" pageSize={10} total={50} />\n      <Divider />\n      <Pagination current={1} pageSize={10} total={60} divider />\n      <Divider />\n      <Pagination current={1} pageSize={10} total={70} divider />\n    </div>\n  )\n}\n```\n\n### \u8ff7\u4f60\u5206\u9875\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Pagination size=\"small\" current={1} pageSize={5} pageSizeOptions={[5, 10, 20, 30]} total={249} />\n      <Divider />\n      <Pagination size=\"small\" current={1} pageSize={10} total={50} />\n    </div>\n  );\n}\n```\n\n### \u5bf9\u9f50\n\n\u76ee\u524d\u6709\u4e09\u79cd\u5bf9\u9f50\u65b9\u5f0f `\u5de6\u8fb9(left)`\u3001`\u4e2d\u95f4(center)`\u3001`\u53f3\u8fb9(right)`\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from 'react';\nimport { Pagination, Divider } from 'uiw';\n\nexport default function Demo() {\n  return (\n    <div>\n      <Pagination\n        current={5}\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n      <Divider />\n      <Pagination\n        current={1}\n        alignment=\"center\"\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n      <Divider />\n      <Pagination\n        current={25}\n        alignment=\"right\"\n        total={250}\n        onChange={(pageNumber) => { \n          console.log(`pageNumber:${pageNumber}`)\n        }}\n      />\n    </div>\n  );\n}\n```\n\n### Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|------ |-------- |---------- |-------- |\n| current | \u5f53\u524d\u9875\u6570\uff0c\u9009\u4e2d\u7684\u9875\u6570 | Number | 1 |\n| total | \u6570\u636e\u603b\u6570 | Number | 0 |\n| pageSize | \u6bcf\u9875\u6761\u6570 | Number | 10 |\n| pageSizeOptions | \u6307\u5b9a\u6bcf\u9875\u53ef\u4ee5\u663e\u793a\u591a\u5c11\u6761 | Number[] | - |\n| divider | \u9875\u7801\u4e4b\u95f4\u662f\u5426\u95f4\u9694 | Boolean | - |\n| size | \u5f53\u4e3a `small` \u65f6\uff0c\u662f\u5c0f\u5c3a\u5bf8\u5206\u9875 | Enum{`small`, `default`} | - |\n| alignment | \u5bf9\u9f50 | Enum{`left`, `center`, `right`} | `left` |\n| onChange | \u9875\u7801\u6539\u53d8\u7684\u56de\u8c03\uff0c\u8fd4\u56de\u6539\u53d8\u540e\u7684\u9875\u7801 | Function(current, total, pageSize) | - |\n| onShowSizeChange | pageSize \u53d8\u5316\u7684\u56de\u8c03 | Function(current, pageSize) | - |",headings:[],headingsList:[]};var a=t(5301),i=t(4760);function o(){return(0,i.jsx)(a.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-pagination/README.md"})}}}]);
//# sourceMappingURL=5922.d8728a13.chunk.js.map