在可变高度网格行中处理@material-ui Skeleton缩放的好方法是使用Grid组件和Skeleton组件结合,通过设置Grid的item属性为true,使得每个网格行都可以独立设置高度。然后在每个网格行中使用Skeleton组件来模拟加载状态。
具体步骤如下:
import { Grid, Skeleton } from '@material-ui/core';
<Grid container spacing={2}>
<Grid item xs={12}>
{/* 第一行 */}
<Skeleton variant="rect" height={100} />
</Grid>
<Grid item xs={12}>
{/* 第二行 */}
<Skeleton variant="rect" height={150} />
</Grid>
{/* 其他网格行 */}
</Grid>
在上述代码中,xs={12}表示每个网格行占据整个容器的宽度,height属性设置了每个网格行的高度。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)
腾讯云云服务器(CVM)是一种可弹性伸缩的云计算基础服务,提供了稳定可靠的计算能力,适用于各类应用场景。通过使用腾讯云云服务器,您可以快速创建、部署和管理云服务器实例,满足不同规模和需求的业务。
注意:本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商,如有需要,可以自行参考相关文档。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云