React 封装 Card 组件

2022-04-19 18:03:42 阅读：222 来源： 互联网

标签：const styled React props 封装 Home border Card

组件代码

import React from "react";
import { MyCardWrapper, MyCardHeader, MyCardMain } from "./styled";

interface IMyCard {
  children?: React.ReactNode;
  title?: string | React.ReactNode;
  headerRightSlot?: string | React.ReactNode;
  border?: boolean;
  borderColor?: string;
  showHeader?: boolean;
  mPadding?: string;
  footer?: React.ReactNode;
}

const MyCard: React.FC<IMyCard> = (props) => {
  const headerBorder = typeof props.border === "undefined" ? true : props.border
  const isShowHeader = typeof props.showHeader === "undefined" ? true : props.showHeader
  const headerBorderColor = props.borderColor || '#fbf1f1'
  return (
    <MyCardWrapper>
      <MyCardHeader border={headerBorder} show={isShowHeader} borderColor={headerBorderColor}>
        <div className="title">
          { props.title }
        </div>
        <div className="header-right">
        { props.headerRightSlot }
        </div>
      </MyCardHeader>
      <MyCardMain padding={props.mPadding}>
        { props.children }
      </MyCardMain>
      { props.footer }
    </MyCardWrapper>
  )
}

export default MyCard

样式代码

import styled from "styled-components";

export const MyCardWrapper = styled.div`
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 4px;
`
export const MyCardHeader = styled.div<{border: boolean, show: boolean; borderColor: string }>`
  width: 100%;
  height: 40px;
  display: ${(props) => props.show ? 'flex' : "none" };
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid ${(props) => props.border ? props.borderColor : "transparent" };
  .title {
    font-size: 16px;
    font-weight: 550;
  }
`
export const MyCardMain = styled.div<{padding: string | undefined}>`
  padding: ${(props) => props.padding || '10px'};
`

使用

import React from "react";
import MyCard from "@/components/MyCard";

const Home: React.FC = () => {
  const onMore = () => {
    alert('More')
  }
  const more = <span onClick={onMore}>More</span>
  return (
    // <SystemFrame>
    // </SystemFrame>
    <>
      <MyCard title="默认card" headerRightSlot={more}>this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard border={false} title="tititle 没有 border">this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard borderColor="red" title="设置 border 颜色">this is Home</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard showHeader={false} title="不展示 Header">不展示 Header</MyCard>
      <div style={{"height": "5px"}}></div>

      <MyCard title="有 footer" footer={<div style={{"background": "yellow"}}>我是footer</div>}>this is Home</MyCard>
    </>
  )
}

export default Home

展示效果

标签：const,styled,React,props,封装,Home,border,Card
来源： https://www.cnblogs.com/fczbk/p/16166481.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React 封装 Card 组件