React群聊组合头像

原创已于 2023-04-18 20:04:34 修改 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2023-04-18 20:04:16 首次发布

const demoAvatarImages = [
  'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
  'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
];

   <List.Item
          className="GroupChat-ListItem"
          prefix={
            <div className="GroupChat-ImageBox ">
              {demoAvatarImages.map((item) => (
                <Avatar className="GroupChat-Avatar " src={item} />
              ))}
            </div>
          }
        >
 </List.Item>

样式

.GroupChat-ImageBox {
  height: 5rem;
  width: 5rem;
  display: grid; //将容器设置为网格布局；
  grid-template-columns: repeat(
    3,
    1fr
  ); //设置网格列的数量和宽度。auto-fit表示自动适应容器宽度，minmax(100px, 1fr)表示每列的最小宽度为100px，最大宽度为1fr，即平均分配容器剩余宽度；
  grid-template-rows: repeat(
    3,
    1fr
  ); //设置网格行的高度为100px，保证九宫格图片呈正方形；
  grid-gap: 0.2rem;
  margin-top: 0.5rem;
}
.GroupChat-Avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}