Pagination

import { Pagination } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Код DemoPaginationWrapperexport const DemoPaginationWrapper: React.FC<IDemoPaginationWrapperProps> = ({ activePage, children, ...props }) => {
    const [currentActivePage, setCurrentActivePage] = React.useState(activePage);

    const childrenProps: childrenPropTypes = {
        ...props,
        activePage: currentActivePage,
        onChange: setCurrentActivePage,
    };

    return children(childrenProps);
};

Состояния боковых стрелок

Выбрана первая страница

<DemoPaginationWrapper totalPages={7} activePage={1}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана не крайняя страница

<DemoPaginationWrapper totalPages={7} activePage={4}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана последняя страница

<DemoPaginationWrapper totalPages={7} activePage={7}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Частичное скрытие списка страниц

Выбрана страница в начале списка

<DemoPaginationWrapper totalPages={10} activePage={2}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана страница в середине списка

<DemoPaginationWrapper totalPages={10} activePage={6}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Выбрана страница в конце списка

<DemoPaginationWrapper totalPages={10} activePage={9}>
  {({ totalPages, activePage, onChange }) => (
      <Pagination totalPages={totalPages} activePage={activePage} onChange={onChange} />
  )}
</DemoPaginationWrapper>

Светлая тема

<div style={{ padding: '30px 0', backgroundColor: '#00B956' }}>
  <DemoPaginationWrapper totalPages={10} activePage={1} theme="light">
      {({ theme, totalPages, activePage, onChange }) => (
          <Pagination theme={theme} totalPages={totalPages} activePage={activePage} onChange={onChange} />
      )}
  </DemoPaginationWrapper>
</div>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; prev?: Record<string, string>; next?: Record<string, string>; button?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
totalPages*	number		Общее количество страниц
activePage*	number		Номер текущей страницы
theme	"default" \| "light"	default	Тема компонента
onChange*	(value: PaginationValueType) => void		Обработчик изменения активной страницы