@snack-uikit/pagination
v0.6.8
Published
Навигация по страницам (с цифрами или точками)
Downloads
515
Readme
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}/>
</>
);
}
Pagination
Props
| name | type | default value | description |
|------|------|---------------|-------------|
| onChange* | (page: number) => void
| - | Колбек смены значения |
| page* | number
| - | Текущая страница |
| total* | number
| - | Общее количество страниц |
| 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 класснейм |