Dialog
弹框组件
- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义
visible、closeCallback函数。 - 通过visible设置弹框是否显示, 可选true/false, 必需。
- 可通过closeCallback配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
- 默认传了closeCallback之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。
主要属性和接口：
- visible:弹框是否显示标识, 默认false不可见
- closeCallback:关闭弹框的功能函数
- closeButton:右上角关闭按钮是否显示的标识, 默认不显示
- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了closeCallback函数就可以关闭
示例:
<Dialog visible={this.state.visible} closeCallback={::this.closeCallback} closeButton shadowDisabled>
<Dialog.Title>标题标题</Dialog.Title>
<Dialog.Body>
<p>可自定义表格内容</p>
</Dialog.Body>
<Dialog.Footer>
<Button hollow phSize='lg' phStyle='gray' onClick={::this.closeCallback}>取消</Button>
</Dialog.Footer>
</Dialog> onShow(){
this.setState({
visible: true
});
}
closeCallback(){
this.setState({
visible: false
});
}Constructor
Dialog
Dialog
()
Example:
import React, { Component } from "react"
import ButtonGroup from "phoenix-ui/lib/button-group"
import Button from "phoenix-ui/lib/button"
import Dialog from "phoenix-ui/lib/modal/Dialog"
import Code from "./code/code"
export default class dialog extends Component{
constructor(props,context){
super(props,context);
this.state = {
visible1: false,
visible2: false,
visible3: false
}
}
onShow(key){
let o = {};
o[key] = true;
this.setState(o);
}
closeCallback(key){
let o = {};
o[key] = false;
this.setState(o);
}
render(){
return(
<div>
<h2 className="comp-title">Dialog</h2>
<h3 className="comp-type">visible(默认false) 弹框是否可见，必需<br/>closeCallback 关闭弹框的执行函数</h3>
<div className="content">
<Button radius phSize="lg" onClick={this.onShow.bind(this,"visible1")} >dialog1</Button>
</div>
<Dialog visible={this.state.visible1} closeCallback={this.closeCallback.bind(this,"visible1")}>
<Dialog.Title>标题1</Dialog.Title>
<Dialog.Body>
<p>可自定义表格内容</p>
</Dialog.Body>
<Dialog.Footer>
<ButtonGroup>
<Button hollow phSize="lg" phStyle="gray" onClick={this.closeCallback.bind(this,"visible1")}>取消</Button>
<Button hollow phSize="lg" onClick={this.closeCallback.bind(this,"visible1")}>确定</Button>
</ButtonGroup>
</Dialog.Footer>
</Dialog>
<Code target="dialog-closecallback" />
<h3 className="comp-type">closeButton(默认不显示) 是否显示弹框左上角关闭按钮</h3>
<div className="content">
<Button radius phSize="lg" onClick={this.onShow.bind(this,"visible2")}>dialog2</Button>
</div>
<Dialog visible={this.state.visible2} closeCallback={this.closeCallback.bind(this,"visible2")} closeButton>
<Dialog.Title>标题2</Dialog.Title>
<Dialog.Body>
<p>可自定义表格内容</p>
</Dialog.Body>
<Dialog.Footer>
<ButtonGroup>
<Button hollow phSize="lg" phStyle="gray" onClick={this.closeCallback.bind(this,"visible2")}>取消</Button>
<Button hollow phSize="lg" onClick={this.closeCallback.bind(this,"visible2")}>确定</Button>
</ButtonGroup>
</Dialog.Footer>
</Dialog>
<Code target="dialog-closebutton" />
<h3 className="comp-type">shadowDisabled(默认可关闭) 阴影部分是否可点击关闭弹框</h3>
<div className="content">
<Button radius phSize="lg" onClick={this.onShow.bind(this,"visible3")}>dialog3</Button>
</div>
<Dialog visible={this.state.visible3} closeCallback={this.closeCallback.bind(this,"visible3")} shadowDisabled>
<Dialog.Title>标题3</Dialog.Title>
<Dialog.Body>
<p>可自定义表格内容</p>
</Dialog.Body>
<Dialog.Footer>
<ButtonGroup>
<Button hollow phSize="lg" phStyle="gray" onClick={this.closeCallback.bind(this,"visible3").bind(this)}>取消</Button>
<Button hollow phSize="lg" onClick={this.closeCallback.bind(this,"visible3")}>确定</Button>
</ButtonGroup>
</Dialog.Footer>
</Dialog>
<Code target="dialog-shadowdisabled" />
</div>
);
}
}方法
closeCallback
closeCallback
()
关闭弹框的执行函数
属性
classPrefix
String
样式前缀
Default:
'dialog'
closeButton
Boolean
右上角按钮是否可见, 默认不可见
componentTag
String
标签tagName
shadowDisabled
Boolean
阴影部分是否点击可关闭弹框, 默认传了closeCallback之后可关闭
visible
Boolean
是否可见标识