前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
导语
今天是继续做开源项目的一天 今天是准备封装一个带个标题栏的一个组件 还是日常的一个过程 我们先上个代码
代码部分
import React, { Component } from 'react'; import { Card } from 'antd'; import styles from './index.scss'; export class StepCard extends Component { render() { const { title, children, rightContent, hasBorder, titlebackgroundColor, titleColor, style, cardStyle, titleBorder, ...restProps } = this.props; return ( <div style={style} id={this.props.id}> <div style={{ backgroundColor: `${titlebackgroundColor ? titlebackgroundColor : '#fff'}`, border: titleBorder ? titleBorder : 'none', }} className={styles.titleContent} > <div className={styles.titleBackground} style={{ color: `${titleColor ? titleColor : '#1890ff'}` }} > <div className={styles.leftFlag} /> {title || '--'} </div> <span>{rightContent || ''}</span> </div> {children && <Card bordered={hasBorder}>{children}</Card>} </div> ); } } export default StepCard
父组件引入
import StepCard from './Common/StepCard/index';代码部分
{/* title表示标题 titlebackgroundColor表示背景色 titleBackground文字颜色 */} <StepCard title="状态" titlebackgroundColor={'red'} titleBackground={'blue'}></StepCard>
运行结果
总结
每天一行代码 成就最好的自己 可以动态传入参数控制表头的颜色 还有文字的样式