# Pagination Pagination может отображаться в разных размерах и может содержать селект с выбором количеста элементов на странице и быстрый выбор страницы ## Pagination Props (свойства) для компонента Pagination: [{"name":"view","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"primary\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"primary\""}]}},{"name":"viewCurrentPage","type":{"name":"enum","raw":"\"clear\" | \"default\" | \"secondary\" | \"primary\"","value":[{"value":"\"clear\""},{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"primary\""}]}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"type","type":{"name":"enum","raw":"\"default\" | \"compact\"","value":[{"value":"\"default\""},{"value":"\"compact\""}]}},{"name":"leftContent","type":{"name":"ReactNode"}},{"name":"rightContent","type":{"name":"ReactNode"}},{"name":"helperText","type":{"name":"ReactNode"}},{"name":"count","type":{"name":"number"}},{"name":"value","type":{"name":"number"}},{"name":"defaultValue","type":{"name":"number"}},{"name":"hasQuickJump","type":{"name":"boolean"}},{"name":"hasPerPage","type":{"name":"boolean"}},{"name":"perPage","type":{"name":"number"}},{"name":"defaultPerPage","type":{"name":"number"}},{"name":"perPageList","type":{"name":"number[]"}},{"name":"disabledPages","type":{"name":"string[]"}},{"name":"slots","type":{"name":"enum","raw":"7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15","value":[{"value":"7"},{"value":"8"},{"value":"9"},{"value":"10"},{"value":"11"},{"value":"12"},{"value":"13"},{"value":"14"},{"value":"15"}]}},{"name":"pilled","type":{"name":"boolean"}},{"name":"square","type":{"name":"boolean"}},{"name":"isCommonButtonStyles","type":{"name":"boolean"}},{"name":"placeholderQuickJump","type":{"name":"string"}},{"name":"textQuickJump","type":{"name":"string"}},{"name":"textPerPage","type":{"name":"string"}},{"name":"listWidth","type":{"name":"Width<string | number>"}},{"name":"singleLine","type":{"name":"boolean"}},{"name":"onChange","type":{"name":"((page?: number, perPage?: number) => void) | undefined"}},{"name":"onChangePageValue","type":{"name":"((page?: number) => void)"}},{"name":"onChangePerPageValue","type":{"name":"((perPage?: number) => void)"}}] ## Использование Компонент  `Pagination`  должен содержать параметр slots. Он обозначает количество кнопок в пагинции Также компонент имеет параметр hasPerPage, логика работы такова:
Если указан только параметр count, то он равен кол-ву страниц
Если указан параметр hasPerPage или perPage, то count делится на perPage ```tsx
import React from 'react';
import { Pagination } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{display: "flex", "flex-direction": "column"}}>
<div>
<Pagination slots={7} count={200} />
</div>
<div>
<Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
</div>
<div>
<Pagination slots={9} count={200} hasPerPage={true} />
</div>
<div>
<Pagination slots={9} count={200} hasPerPage={false} />
</div>
</div>
);
}
```