@snack-uikit/pagination

Pagination

Installation

npm i @snack-uikit/pagination

TODO

• обновить цвета pagination slider после переработки палитры
• подумать о семантике кнопок навигации (возможно, использовать ссылки вместо кнопок и добавлять на них href)
• пересмотреть механизм переключения страницы при нажатие на многоточие

Example

import { Pagination, PaginationSlider } from "@snack-uikit/pagination";

function App() {
  const [page, setPage] = useState(args.page);

  return (
    <>
      <Pagination page={page} onChange={setPage} total={10}/>
      <PaginationSlider page={page} onChange={setPage} total={10}/>
    </>
  );
}

Changelog

Pagination

Props

name	type	default value	description
onChange*	(page: number, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void	-	Колбэк смены значения
page*	number	-	Текущая страница
total*	number	-	Общее количество страниц
variant	enum Variant: "link", "button"	button	Варианты тега кнопок: или
maxLength	number	7	Максимальное количество страниц/элементов, помещающихся до транкейта
hrefFormatter	(page: number) => string	-	Колбэк форматирования ссылки
className	string	-	CSS класснейм
size	enum Size: "xs", "s"	s	Размер

PaginationSlider

Props

name	type	default value	description
onChange*	(page: number) => void	-	Колбек смены значения
page*	number	-	Текущая страница
total*	number	-	Общее количество страниц
className	string	-	CSS класснейм