React 封装 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