Open borm opened 4 years ago
@borm What change do you have in mind, how would it work? I have been wondering about this problem since we introduced the component, I'm not sure we have many great options. Things I have seen in the wild:
diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
index 171041c299..ad4988dc6b 100644
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -20,7 +20,7 @@ export const styles = (theme) => ({
minWidth: 32,
height: 32,
padding: '0 6px',
- margin: '0 3px',
+ margin: 3,
color: theme.palette.text.primary,
},
/* Styles applied to the root element if `type="page"`. */
IMHO 3. would be good enough cc @mbrookes
@oliviertassinari, In my mind i have only one change, calculate how many items can be placed in container and place it
calculate how many items can be placed in container and place it
We would need or make sure it doesn't introduce a layout shift during the initial server-side render and that it would still allow SEO crawlers to do their job.
Note that on mobile, infinite scrolling or simple next and previous buttons are often preferable to the usage of the Pagination component.
I agree that it could be interesting to display fewer items on mobile, for the previous generation of phones that are smaller in width.
Have you considered pagination like https://www.shutterstock.com/search/tree?page=2?
hm, totally agreed with u about ssr but i think we can do something like display: none for some items on client side, so markup will be same
i think we can do something like display: none for some items on client side,
The pagination displays the number of items needed to display a stable pagination. Which ones do you propose to hide?
its a good question, and in the end it can have hard logic, mb something like google?
also i think a good idea
mb something like google?
So basically what @oliviertassinari proposed a couple of comment back? (ShutterStock)
So basically what @oliviertassinari proposed a couple of comment back? (ShutterStock)
yep, ShutterStock suggest same pagination for desktop and mobile
but i like more my second example from pinterest
Current Behavior π―
Expected Behavior π€
Steps to Reproduce πΉ
Steps:
Your Environment π