{"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":"e9c022c0-94df-5e36-a422-006a395adbf7","children":[],"parent":"38a5ebba-7224-57a1-a8cc-7b711717c9dc","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  <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":"8554ecb67ad25ad3a2052f7787815221","counter":1520,"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  <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/26e993f/src/pages/components/pagination/code.mdx"}}}}