极客教程React MUI 图片列表布局
React MUI 是一个提供完全加载的组件的UI库，将我们自己的设计系统引入到我们的生产就绪组件中。MUI是一个用户界面库，为快速、易于开发网页提供了预定义和可自定义的React组件，这些Material-UI组件基于谷歌的Material Design。
在本文中，我们将讨论React MUI图片列表布局。图片列表用于以有组织的网格布局显示图像集合。不仅如此，图像列表还改善了视觉内容。
图片列表布局变体:
- 标准图片列表： 标准图片列表包含统一的容器大小、比例和间距，主要用于当项目具有相等重要性时。
- 制作拼布的图片列表： 制作拼布的图片列表通过使用不同的容器大小和比例来强调图像集合中的某些项目，从而创建了一个层次结构。
- 编织的图片列表： 编织的图片列表是通过使用交替的容器比例来创建一个有节奏的布局。
- 砌体图片列表： 砌体图片列表使用动态大小的容器高度来创建布局，反映每个图像的宽高比。主要用于非裁剪显示图像时。
- 带有标题栏的图片列表： 它创建了一个叠加层，包含标题、副标题和次要操作。
- 自定义图片列表： 自定义图像列表也可以像自定义标题栏一样创建，具有更多/更少的间隙、自定义次要操作的位置等。
- API ：API包括：
<ImageList /><ImageListItem /><ImageListItemBar />
语法:
<ImageList cols={...} rowHeight={...}>
...
</ImageList>
创建React项目:
步骤1： 通过npm命令安装react模块以创建一个react应用。
npm create-react-app project name
步骤2： 在创建完React项目后，进入文件夹执行不同的操作。
cd project name
步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：
npm install @mui/material @emotion/react @emotion/styled
工程结构：
运行应用程序的步骤： 打开终端并输入以下命令。
npm start
示例1： 下面的示例演示了React MUI标准图像列表。
import * as React from "react";
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
const data = [
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
]
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Image list</h2>
</div>
<div>
<ImageList sx={{ width: 500, height: 500 }}
cols={3} rowHeight={170}>
{data.map((idx) => (
<ImageListItem key={idx.link} >
<img
src={`{idx.link}?w=
164&h=164&fit=crop&auto=format`}
srcSet={`{idx.link}?w=
164&h=164&fit=crop&auto=format&dpr=2 2x`}
/>
</ImageListItem>
))}
</ImageList>
</div>
</center>
);
}
export default App;
输出：
示例2： 下面的示例演示了React MUI编织图像列表。
import * as React from "react";
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
const data = [
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
{
link:
'https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png',
},
]
function App() {
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Image list</h2>
</div>
<div>
<ImageList sx={{ width: 500, height: 500 }}
variant="woven" cols={3} gap={8}>
{data.map((idx) => (
<ImageListItem key={idx.link} >
<img
src={`{idx.link}?w=
164&h=164&fit=crop&auto=format`}
srcSet={`{idx.link}?w=
164&h=164&fit=crop&auto=format&dpr=2 2x`}
/>
</ImageListItem>
))}
</ImageList>
</div>
</center>
);
}
export default App;
输出:
参考资料： https://mui.com/material-ui/react-image-list