Statues
Our components have different statuses depending on how they are used. This table shows all the variations of the paging according to its behaviour.
Best practices
|
|
Number |
Navigation |
Select |
|---|---|---|---|
|
Default Paging default status, when it is not hovered. |
|
|
|
|
Hovered When user hover the paging. |
|
|
|
|
Selected When user select a number or navigation |
|
|
|
|
Select option hover When you open the select and fly over the elements inside |
|
|
|
|
Disable When a navigation is not active and the action can’t be completed. |
|
|
|
You have different page sizes for different screens, with more pages assigned for larger screens and less pages assigned for smaller screens.
Screen 2XL - XL Tailwind
Screen LG - Tailwind
Screen MD - SM Tailwind
Global behavior
Based on the size of the screen, the paging can either display a batch of 3, 5 or 8 elements visible. In this situation, when a user is using the paging he will see 3 by 3 or 5 by 5 the pages. Moreowver, when we have an odd number, the paging visible will be adapted for the lasted batch in order to only show the rest of the page available.
For example: in this case, we have 13 pages and we are displaying batch of 5 pages. This means, that the 3rd batch will only show the 3 lastest page available.
|
From page 10 |
To page 11 |
|---|---|
|
|
Other navigation possible
