Pagination

import {Provider} from '@clayui/core';
import Pagination from '@clayui/pagination';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Pagination>
          <Pagination.Item>{1}</Pagination.Item>
          <Pagination.Ellipsis
            aria-label="More"
            title="More"
            items={[2, 3, 4, 5]}
          />
          <Pagination.Item>{'End'}</Pagination.Item>
        </Pagination>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import React from 'react';

export default function App() {
  const [active, setActive] = useState.useState(8);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <ClayPaginationWithBasicItems
          active={active}
          ellipsisBuffer={2}
          ellipsisProps={{'aria-label': 'More', title: 'More'}}
          onActiveChange={setActive}
          totalPages={25}
        />
      </div>
    </Provider>
  );
}

<ClayPaginationWithBasicItems
  ariaLabels={{
    link: 'Change the page to {0}',
    next: 'Change the page to {0}',
    previous: 'Change the page to {0}',
  }}
  activePage={8}
  ellipsisBuffer={2}
  totalPages={25}
/>

<ClayPaginationWithBasicItems
  aria-label="Pagination for 25 pages worth of stuff"
  activePage={8}
  ellipsisBuffer={2}
  totalPages={25}
/>

<ClayPaginationWithBasicItems
  activePage={8}
  ellipsisBuffer={2}
  ellipsisProps={{
    'aria-label': 'Show links to pages {0} through {1}',
    title: 'Show links to pages {0} through {1}',
  }}
  totalPages={25}
/>