card 组件

card 组件

这是使用 ts 写的card 组件,基本实现elememt ui 组件库上 card 组件效果

这是具体的代码

import React, { FC, memo } from 'react';
import Css from './index.module.less';
import { CardProps } from './interface';

const Card: FC<CardProps> = memo(
  ({ title, extra, bodyStyle, shadow, width, height, border, children }) => {
    shadow = shadow ? shadow : 'always';
    title = title ? title : null;
    extra = extra ? extra : null;
    let style: any = {
      width: '300px',
      border: '1px solid #b1b3b8',
    };

    if (width) {
      style.width = width;
    }
    if (height) {
      style.height = height;
    }
    if (border) {
      style.border = border;
    }

    return (
      <div className={Css['Card']} style={style as any}>
        <div className={Css[shadow as any]}>
          <div
            className={Css['header']}
            style={{ opacity: title == null && extra == null ? 0 : 1 }}
          >
            <div className={Css['left']}>
              <p>{title}</p>
            </div>
            <div className={Css['right']}>{extra}</div>
          </div>
          <div style={bodyStyle}>{children}</div>
        </div>
      </div>
    );
  },
);

export default Card;

使用的代码:

import React from 'react';
import Card from '..';
import Button from '../../Button';

export default function index1() {
  return (
    <div>
      <Card
        title={'卡片名称'}
        shadow={'hover'}
        extra={<Button type="text">操作按钮</Button>}
        bodyStyle={{ padding: '12px' }}
      >
        <p>列表内容1</p>
        <p>列表内容2</p>
        <p>列表内容3</p>
        <p>列表内容4</p>
      </Card>
    </div>
  );
}

这是效果图