以下为一篇编写卡片组件的案例，利用ts+react函数组件。
- card组件
import { Card, Button, Image } from 'semantic-ui-react'
interface cardInfo {
name: string,
description?: string,
logoSrc?: string,
linkUrl?: string,
slot?: any
}
const CardExampleCard: React.FC<cardInfo> = (props) => {
const {name, logoSrc, linkUrl, description, slot} = props
const date:string = new Date().toLocaleString();
return (
<Card>
{
logoSrc?<Image src={logoSrc} wrapped ui={false} />:null
}
<Card.Content>
<Card.Header>{name}</Card.Header>
<Card.Meta>
<span className='date'>{date}</span>
</Card.Meta>
<Card.Description>
{description?description:null}
</Card.Description>
</Card.Content>
{
linkUrl?
<Card.Content extra>
<Button><a></a></Button>
</Card.Content>:null
}
{
slot?
<Card.Content extra>
{slot}
</Card.Content>:null
}
</Card>
)
}
export default CardExampleCard
- 应用card 组件
import { useEffect } from "react";
import { Grid, Icon, Card} from 'semantic-ui-react';
import YumyCard from '@/components/card'
import info from '@/assets/img/info.png'
import './home.module.scss';
const home = () => {
useEffect(() => {
}, [])
return (
<YumyCard
name='yummy'
logoSrc={info}
description='so sweet'
slot={<Icon name='like' />}
/>
);
};
export default home;
-
效果图
card
