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) => (
          <Card
            key={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) => (
        <Card
          key={index}
          hoverable
          style={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：当一行放不下时，会自动换行。