是否根据屏幕大小动态调整ImageList列？ [英] Dynamically adjust ImageList columns based on screen size?

问题描述

我尝试使用ImageList组件而不是Grid，因为我只需要一个带有标题的照片网格，这似乎就是ImageList的全部意义所在。我的问题是，与网格不同，我不能为不同的屏幕大小传递breakpoint道具(我觉得这很奇怪，因为这似乎合乎逻辑)，这样我就可以在不同的屏幕上获得不同的列数。根据屏幕大小调整列数的最佳方法是什么？

推荐答案

ImageList使用CSS grid，需要col道具to setgrid-template-columns，但没有任何响应接口。您可以将ImageList替换为显示设置为grid的Box组件，并使用sx prop根据屏幕大小声明列模板值，但首先让我们定义一些断点：

const theme = createTheme({
  breakpoints: {
    values: {
      mobile: 0,
      bigMobile: 350,
      tablet: 650,
      desktop: 900
    }
  }
});

然后在组件中，您可以开始使用它，如下所示：

import ImageListItem, { imageListItemClasses } from "@mui/material/ImageListItem";

<ThemeProvider theme={theme}>
  <Box
    sx={{
      display: "grid",
      gridTemplateColumns: {
        mobile: "repeat(1, 1fr)",
        bigMobile: "repeat(2, 1fr)",
        tablet: "repeat(3, 1fr)",
        desktop: "repeat(4, 1fr)"
      }
      // standard variant from here:
      // https://github.com/mui-org/material-ui/blob/3e679ac9e368aeb170d564d206d59913ceca7062/packages/mui-material/src/ImageListItem/ImageListItem.js#L42-L43
      [`& .${imageListItemClasses.root}`]: {
        display: "flex",
        flexDirection: "column"
      }
    }}
  >
    {itemData.map((item) => <ImageListItem {...}/>)}
  </Box>
</ThemeProvider>

实时演示

引用

• Media queries in MUI components
• https://mui.com/customization/breakpoints/#main-content

这篇关于是否根据屏幕大小动态调整ImageList列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！