ant design Card组件了解

ant design card文档

示例1

• 需求：用组件card，用react实现其cover固定大小并自适应。并实现一行6个card，超过自动换行。

• 代码

  import { Card } from 'antd';const cards = [{ title: "Card 1", content: "This is card 1" },{ title: "Card 2", content: "This is card 2" },{ title: "Card 3", content: "This is card 3" },{ title: "Card 4", content: "This is card 4" },{ title: "Card 5", content: "This is card 5" },{ title: "Card 6", content: "This is card 6" },{ title: "Card 7", content: "This is card 7" },{ title: "Card 8", content: "This is card 8" },
  ];function App() {return (<div style={{ display: "flex", flexWrap: "wrap" }}>{cards.map((card) => (<Cardkey={card.title}title={card.title}style={{ flex: "1 0 calc(100% / 6)", margin: "10px" }}>{card.content}</Card>))}</div>);
  }
  

  在上面的代码中，我们使用 display: flex 和 flex-wrap: wrap 来让卡片自动换行。然后我们将每一个卡片的宽度设置为 calc(100% / 6)，这样每一行就可以显示六个卡片了。

  您还需要将卡片的外边距设置为适当的值，以便它们在页面上看起来更加美观。

示例2，带cover

import { Card } from 'antd';
import React, { useState } from 'react';const coverStyle = {height: '150px',width: '100%',objectFit: 'cover',
};const cardStyle = {width: '200px',margin: '10px',
};const testData = [{title: 'Card Title 1',cover: 'http://xxx.jpg',},{title: 'Card Title 2',cover: 'http://xxx.jpg',},{title: 'Card Title 3',cover: 'http://xxx.jpg',},// add more data here...
];function CardList() {const [data, setData] = useState(testData);return (<div style={{ display: 'flex', flexWrap: 'wrap' }}>{data.map((cardData, index) => (<Cardkey={index}hoverablestyle={cardStyle}cover={<img alt="cover" src={cardData.cover} style={coverStyle} />}><Card.Meta title={cardData.title} /></Card>))}</div>);
}export default CardList;

flex回忆

flex 是 CSS3 中用来定义弹性盒子模型的属性。它是一个缩写，包含了三个子属性：flex-grow、flex-shrink 和 flex-basis。

在这里，flex: "1 0 calc(100% / 6)" 表示：

• flex-grow: 1：表示当有剩余空间时，卡片可以根据比例放大以填充父容器。
• flex-shrink: 0：表示当空间不足时，卡片不会缩小，保持原始大小。
• flex-basis: calc(100% / 6)：表示卡片的初始宽度为父容器宽度的 1/6。

这样设置之后，每行就可以显示六个等宽的卡片，并且当窗口尺寸改变时，卡片的宽度也相应地进行调整。

flex-wrap: wrap：当一行放不下时，会自动换行。