「Ant Design」Antd 中卡片如何完全不展示内容区域、按需展示内容区域、不展示标题

zoe_ya2024-07-24 20:30

前言

下面是默认的 Antd 卡片，由以下区域组成

处理 Antd 的 Card 展示形式大致有下面三种

卡片完全不展示内容区域

复制代码

const App = () => (
    <Card title="Default size card" extra={<a href="#">More</a>} 
    style={{ width: 300 }}
    bodyStyle={{display:'none'}}>
      <p>Card content</p>
    </Card>
);

按需展示内容区域

引入一个状态

复制代码

import React, { useState } from 'react';
import { Card, Button } from 'antd';
import 'antd/dist/reset.css';

const App = () => {
  const [showContent, setShowContent] = useState(false);

  return (
    <Card
      title="这是标题"
      extra={<a href="#">更多</a>}
      style={{ width: 300 }}
    >
      {showContent && (
        <div>这是内容区域</div>
      )}
      <Button onClick={() => setShowContent(!showContent)}>
        切换内容显示
      </Button>
    </Card>
  );
};

export default App;

不展示标题区域

复制代码

import { Card } from 'antd';
import React from 'react';
const App = () => (
    <Card  
    style={{ width: 300 }}
>
      <p>Card content</p>
    </Card>
);