Add responsive cols from values to ImageList (like the experimental Grid)

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

https://mui.com/material-ui/

MIT License

94.11k stars 32.34k forks source link

Add responsive cols from values to ImageList (like the experimental Grid) #34547

Open bnbon opened 2 years ago

bnbon commented 2 years ago

Duplicates

[X] I have searched the existing issues

Latest version

[X] I have tested the latest version

Summary 💡

It would be great if ImageList also support the columns={{ xs: 4, sm: 8, md: 12 }} attribute like the new experimental GridV2.

Many thanks on the great work.

Examples 🌈

No response

Motivation 🔦

Currently I need to import the useMediaQuery utils and use a switch for this.

siriwatknp commented 2 years ago

@bonbonio Thanks for the feedback! Would you mind sharing your use case in a Code Sandbox?

bnbon commented 2 years ago

I think it's clear enough considering the functionality that exists in the experimental GridV2; it's bringing over the responsive breakpoints into the cols={} attribute.

Gregliest commented 1 year ago

I'll add that useMediaQuery does not work with server side rendering. So, currently ImageList is not a viable option if you are using SSR and want to change the number of columns responsively.

siriwatknp commented 1 year ago

After checking the implementation, I think we could add the responsiveness to the ImageList similar to Grid v2. cc @hbjORbj if you are interested in this.