{"componentChunkName":"component---src-pages-components-pagination-code-mdx","path":"/components/pagination/code/","result":{"pageContext":{"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/pagination/code.mdx","titleType":"prepend","MdxNode":{"id":"38393a66-58ff-5a87-b158-bc19bd20ecec","children":[],"parent":"859376e2-ad36-518e-836a-9446cbb0faf8","internal":{"content":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/pagination--pagination\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=pagination\",\n  }}\n  knobs={{\n    Pagination: [\"disabled\", \"isLastPage\", \"pageInputDisabled\", \"pagesUnknown\"],\n  }}\n>\n  {`\n  <div style={{width: '800px'}}>\n    <Pagination\n      backwardText=\"Previous page\"\n      forwardText=\"Next page\"\n      itemsPerPageText=\"Items per page:\"\n      page={1}\n      pageNumberText=\"Page Number\"\n      pageSize={10}\n      pageSizes={[\n        10,\n        20,\n        30,\n        40,\n        50\n      ]}\n      totalItems={103}\n    />\n  </div>\n  `}\n</ComponentDemo>\n","type":"Mdx","contentDigest":"ae8163d71f6f43fcd777aa1267446cfa","counter":1555,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Pagination","description":"Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Pagination\ndescription: Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.\ntabs: [\"Code\", \"Usage\", \"Style\", \"Accessibility\"]\n---\n\n<ComponentDemo\n  links={{\n    React:\n      \"https://react.carbondesignsystem.com/?path=/story/pagination--pagination\",\n    Angular:\n      \"https://angular.carbondesignsystem.com/?path=/story/components-pagination--basic\",\n    Vue:\n      \"http://vue.carbondesignsystem.com/?path=/story/components-cvpagination--default\",\n    Vanilla: \"https://the-carbon-components.netlify.com/?nav=pagination\",\n  }}\n  knobs={{\n    Pagination: [\"disabled\", \"isLastPage\", \"pageInputDisabled\", \"pagesUnknown\"],\n  }}\n>\n  {`\n  <div style={{width: '800px'}}>\n    <Pagination\n      backwardText=\"Previous page\"\n      forwardText=\"Next page\"\n      itemsPerPageText=\"Items per page:\"\n      page={1}\n      pageNumberText=\"Page Number\"\n      pageSize={10}\n      pageSizes={[\n        10,\n        20,\n        30,\n        40,\n        50\n      ]}\n      totalItems={103}\n    />\n  </div>\n  `}\n</ComponentDemo>\n","fileAbsolutePath":"/zeit/3b23ef32/src/pages/components/pagination/code.mdx"}}}}