作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用 Material-UI GridList 时,单元格不会“正确”包裹在网格中。
在 css 中潜水时,我注意到它使用了 flex-wrap,它假设可以弯曲行,但我确信有一种方法可以使用这个组件,并且可以选择填充所有空格。
代码:
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-around",
overflow: "hidden",
backgroundColor: theme.palette.background.paper,
paddingTop: theme.spacing(4),
},
gridList: {
width: 500,
height: '100%',
},
listItem: {
borderRadius: theme.borderRadius['secondary'],
overflow: "hidden",
},
}));
function Gallery(props) {
const styles = useStyles();
const cols = [
[2, 2],
[1, 2],
[1, 2],
[2, 1],
[1, 1],
[1, 1],
[1, 1],
];
const renderItem = (tile, index) => (
<GridListTile
classes={{ root: styles.listItem }}
key={tile.image}
cols={cols[index % cols.length][0]}
rows={cols[index % cols.length][1]}
>
<img src={tile.image} alt={tile.title} />
</GridListTile>
);
return (
<div className={styles.root}>
<GridList
cellHeight={160}
className={styles.gridList}
cols={3}
spacing={10}
>
{data.items.map(renderItem)}
</GridList>
</div>
);
}
我很感激帮助
最佳答案
我引用了 MaterialUI 的文档
您同时指定了行和列。删除 rows={cols[index % cols.length][1]}
解决了这个问题。
这是工作示例。 (图片取自sample)
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
const App = () => {
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around',
overflow: 'hidden',
backgroundColor: theme.palette.background.paper,
paddingTop: theme.spacing(4),
},
gridList: {
width: 500,
height: '100%',
},
listItem: {
overflow: 'hidden',
},
}));
const styles = useStyles();
const cols = [
[2, 2],
[1, 2],
[1, 2],
[2, 1],
[1, 1],
[1, 1],
[1, 1],
];
const tileData = [
{
img: '/static/images/grid-list/breakfast.jpg',
title: 'Breakfast',
author: 'jill111',
cols: 2,
featured: true,
},
{
img: '/static/images/grid-list/burgers.jpg',
title: 'Tasty burger',
author: 'director90',
},
{
img: '/static/images/grid-list/camera.jpg',
title: 'Camera',
author: 'Danson67',
},
{
img: '/static/images/grid-list/morning.jpg',
title: 'Morning',
author: 'fancycrave1',
featured: true,
},
{
img: '/static/images/grid-list/hats.jpg',
title: 'Hats',
author: 'Hans',
},
{
img: '/static/images/grid-list/honey.jpg',
title: 'Honey',
author: 'fancycravel',
},
{
img: '/static/images/grid-list/vegetables.jpg',
title: 'Vegetables',
author: 'jill111',
cols: 2,
},
{
img: '/static/images/grid-list/plant.jpg',
title: 'Water plant',
author: 'BkrmadtyaKarki',
},
{
img: '/static/images/grid-list/mushroom.jpg',
title: 'Mushrooms',
author: 'PublicDomainPictures',
},
{
img: '/static/images/grid-list/olive.jpg',
title: 'Olive oil',
author: 'congerdesign',
},
{
img: '/static/images/grid-list/star.jpg',
title: 'Sea star',
cols: 2,
author: '821292',
},
{
img: '/static/images/grid-list/bike.jpg',
title: 'Bike',
author: 'danfador',
},
];
const renderItem = (tile, index) => (
<GridListTile
classes={{ root: styles.listItem }}
key={tile.image}
cols={cols[index % cols.length][0]}
>
<img src={tile.img} alt={tile.title} />
</GridListTile>
);
return (
<div className={styles.root}>
<GridList
cellHeight={160}
className={styles.gridList}
cols={3}
spacing={10}
>
{tileData.map(renderItem)}
</GridList>
</div>
);
};
export default App;
关于javascript - React Material UI GridList 单元格不能正确换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66510041/
在 Vaadin 7.0,显示时JavaBean Table 中的数据与 BeanContainer ,用新数据刷新表的正确方法是什么? 最佳答案 该表通过监听器监视表项的属性。如果您通过表的 Ite
首先,我使用的是带有 Axis2 1.6.2 的 eclipse,我正在 tomcat 6 上部署我创建的 Web 服务。Web 服务是在 eclipse 中通过自上而下的方法创建的。 我被要求使对我
我已将 Rails 3.1.1 应用程序升级到 Rails 3.1.3,现在,对于每个请求,它仅响应错误数量的参数(3 for 1)。不幸的是,它没有说明错误在哪里,并且应用程序跟踪为空。我认为存在一
我是一名优秀的程序员,十分优秀!