A component to handle page selecting on data which has many pages.
You can play around with a Ui.Pagination below using the controls.
Ui.Pagination
<Ui.Pagination size={Ui.Size.Px(16)} disabled={false} sidePages={1} perPage={10} total={300} page={0}/>
The current page can be controlled with the page property.
page
<Ui.Pagination total={30} page={1}/>
The number of items per page can be set with the perPage property.
perPage
<> <Ui.Pagination perPage={30} total={300} page={0}/> <Ui.Pagination perPage={100} total={300} page={0}/> <Ui.Pagination perPage={300} total={30} page={0}/></>
The total number of items can be set with the total property.
total
<> <Ui.Pagination perPage={10} total={10} page={0}/> <Ui.Pagination perPage={10} total={40} page={0}/> <Ui.Pagination perPage={10} total={100} page={0}/></>
The number of pages displayed in either side of the current page can be changed with the sidePages property.
sidePages
<> <Ui.Pagination sidePages={1} total={90} page={5}/> <Ui.Pagination sidePages={2} total={90} page={5}/> <Ui.Pagination sidePages={3} total={90} page={5}/></>
The size of the component can be set with the size property (in pixels).
size
<> <Ui.Pagination size={Ui.Size.Px(12)} total={30} page={1}/> <Ui.Pagination size={Ui.Size.Px(16)} total={30} page={1}/> <Ui.Pagination size={Ui.Size.Px(20)} total={30} page={1}/></>
The component can be disabled using the disabled property.
disabled
<> <Ui.Pagination disabled={false} total={30} page={1}/> <Ui.Pagination disabled={true} total={30} page={1}/></>
The component calls the onChange property when clicking on one of its buttons.
onChange
<Ui.Pagination total={30} page={1} onChange={ (page : Number) { Ui.Notifications.notifyDefault(<>"Page selected: #{page}"</>) } }/>
Mint UI is a design system and component library for building websites, web and desktop applications.