@gitlab/ui/dist/components/base/pagination/pagination.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# Pagination\n\n<!-- STORY -->\n\n## Current page\n\nThe current page's value should be bound using `v-model`, e.g.:\n\n```html\n<script>\nexport default {\n  data: () => ({\n    page: 2,\n  }),\n};\n</script>\n\n<template>\n  <gl-pagination v-model=\"page\" :per-page=\"10\" :total-items=\"100\" />\n</template>\n```\n\n## Compact pagination\n\nIn some cases, you might not be able to provide the total items count because your API doesn't support it or because of performance concerns. For such cases, the pagination component supports a compact mode, where only the previous and next buttons are displayed.\n\nTo enable the compact mode, you'll need to provide the previous and/or next page numbers via the `prev-page` and `next-page` props respectively.\n\n> NOTE: If one of the props is omitted, the corresponding button will be disabled. If both properties are omitted the pagination won't render at all.\n\n```html\n<template>\n  <gl-pagination :value=\"2\" :prev-page=\"1\" :next-page=\"3\" />\n</template>\n```\n\n## Limits\n\nThe `limits` prop is used to define pagination link limits based on Bootstrap's breakpoint sizes. It is strongly recommended you provide a 'default' property, even if you have accounted for all breakpoint sizes. While unlikely, it is possible breakpoints could change, thus, a default property ensures a graceful fallback.\n\nHere is `limits` default value:\n\n```js\n{\n  xs: 0,\n  sm: 3,\n  md: 9,\n  default: 9,\n}\n```\n\n> Note: The component will not render any UI if the total items available for display is less than the max items per page.\n\n## Internet Explorer 11\n\nThis component makes use of the [`Number.isInteger` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger), which is not supported in IE11, make sure it's being polyfilled when using the component. [`core-js`](https://github.com/zloirock/core-js) incudes the appropriate polyfill for this.\n";

var pagination_documentation = {
  followsDesignSystem: true,
  description: description,
  examples: examples,
  propsInfo: {
    perPage: {
      additionalInfo: 'Number of items per page'
    },
    totalItems: {
      additionalInfo: 'Total number of items'
    },
    limits: {
      additionalInfo: 'The object must contain the xs, sm, md and default keys'
    },
    linkGen: {
      additionalInfo: 'A function that receives the page number and that returns a string representing the page URL'
    },
    prevPage: {
      additionalInfo: 'When using the compact pagination, use this prop to pass the previous page number'
    },
    prevText: {
      additionalInfo: 'Text for the previous button (overridden by "previous" slot)'
    },
    nextPage: {
      additionalInfo: 'When using the compact pagination, use this prop to pass the next page number'
    },
    nextText: {
      additionalInfo: 'Text for the next button (overridden by "next" slot)'
    },
    ellipsisText: {
      additionalInfo: 'Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)'
    },
    labelFirstPage: {
      additionalInfo: 'aria-label for the first page item'
    },
    labelPrevPage: {
      additionalInfo: 'aria-label for the previous page item'
    },
    labelNextPage: {
      additionalInfo: 'aria-label for the next page item'
    },
    labelLastPage: {
      additionalInfo: 'aria-label for the last page item'
    },
    labelPage: {
      additionalInfo: 'aria-label getter for numbered page items, defaults to "Go to page <page_number>"'
    },
    size: {
      additionalInfo: 'Controls the component\'s size, value should be one of "sm" or "lg", leave empty to use the default size'
    },
    align: {
      additionalInfo: 'Controls the component\'s horizontal alignment, value should be one of "left", "center", "right" or "fill"'
    }
  },
  slots: [{
    name: 'previous',
    description: "Content for the \"previous\" button. Overrides the \"prevText\" prop.",
    scopedProps: "{ active: boolean, disabled: boolean, page: number }"
  }, {
    name: 'next',
    description: "Content for the \"next\" button. Overrides the \"nextText\" prop.",
    scopedProps: "{ active: boolean, disabled: boolean, page: number }"
  }, {
    name: 'page-number',
    description: "Content for page number buttons.",
    scopedProps: "{ active: boolean, disabled: boolean, page: number }"
  }, {
    name: 'ellipsis-left',
    description: "Content for the left ellipsis. Overrides the \"ellipsisText\" prop."
  }, {
    name: 'ellipsis-right',
    description: "Content for the right ellipsis. Overrides the \"ellipsisText\" prop."
  }]
};

export default pagination_documentation;