先来张效果图:
1.Components
// components
import React from 'react';
import { Link } from 'react-router';
class ConfirmWins extends React.Component {
constructor() {
super();
}
render() {
const props = this.props;
return (
<div className="confirm-wins-container">
<div className="wins">
<div className="title text-center">{props.title}</div>
<div className="desc gray-text96">{props.desc}</div>
<div className="fn-btn text-center">
{props.leftBtn?<span className="btn left-btn" onClick={props.onLeftClick}>{props.leftBtn.text}</span>:''}
<span className="btn right-btn" onClick={props.onRightClick}>{props.rightBtn.text}</span>
</div>
</div>
</div>
);
}
}
ConfirmWins.propTypes = {
title: React.PropTypes.string.isRequired,
desc: React.PropTypes.string.isRequired,
leftBtn: React.PropTypes.object,
rightBtn: React.PropTypes.object.isRequired,
onLeftClick: React.PropTypes.func,
onRightClick: React.PropTypes.func.isRequired,
};
export default ConfirmWins;
2. Stylus css
@import '../util/constant'
.confirm-wins-container
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 30;
background: rgba(0, 0, 0, 0.5);
.wins
position: absolute;
margin-top: 50%;
background: $bgColor;
width: 80%;
margin-left: 10%;
padding: 1em;
border-radius 4px
.title
font-size: 16px;
margin: .5em;
.fn-btn
margin-top 1em
.btn
display: inline-block;
border: 1px solid $brandMainColor;
height: 3em;
width: 8em;
line-height: 3em;
border-radius 4px
.left-btn
float: left;
color $brandMainColor
.right-btn
float: right;
border: 1px solid $brandMainColor;
background $brandMainColor
color #fff
3.应用
const addressConfirm = {
title: '很抱歉',
desc: '您还没有设置收货地址,请设置您的收货地址',
leftBtn: {
text: '确认'
},
rightBtn: {
text: '设置地址'
}
};
{state.isShowAddressPopUp?<ConfirmWins {...addressConfirm} onLeftClick={this.closePopUp.bind(this, 'isShowAddressPopUp')} onRightClick={this.goLink.bind(this, '#/address/add')} />:''}
写在最后,关于更多React Components请访问:
https://github.com/qiaolevip/react-mobile