phoenix-ui
Version:
future team ui for app with react
1,257 lines (676 loc) • 36.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimal-ui" />
<title>Prompt - phoenix-ui</title>
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
</head>
<body class="yui3-smart" _assetsPath="../assets">
<nav class="navbar navbar-inverse navbar-fixed-top custom-navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand mainlogo" href="">
<img alt="phoenix-ui" src="../assets/css/logo.png" title="phoenix-ui">
phoenix-ui
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">主页</a>
</li>
</ul>
<div class="navbar-form navbar-right filterAPi" autocomplete="off">
<input type="text" id='txtSearchAPI' class="form-control search-query" placeholder="Search for API" />
<ul id="filterList" class="filterItems dropdown-menu" role="menu"></ul>
</div>
</div>
</div>
</nav>
<div id="sidebar">
<h3>模块/类</h3>
<div id="api-tabview-filter">
<input id='txtSearch' type="search" class="form-control" placeholder="Type to filter Modules/Classes">
</div>
<dl id="sidebar_list">
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/基础组件.html">基础组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Button.html">Button</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/ButtonGroup.html">ButtonGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Star.html">Star</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/布局组件.html">布局组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Row.html">Row</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TableView.html">TableView</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Col.html">Col</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Grid.html">Grid</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/弹出框组件.html">弹出框组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Alert.html">Alert</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Dialog.html">Dialog</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Prompt.html">Prompt</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/提示组件.html">提示组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Popover.html">Popover</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Whisper.html">Whisper</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/操作类组件.html">操作类组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/ImageList.html">ImageList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/LoadingList.html">LoadingList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Popup.html">Popup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Slider.html">Slider</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Steps.html">Steps</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Toast.html">Toast</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Accordion.html">Accordion</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Swipe.html">Swipe</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/标签组件.html">标签组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Icon.html">Icon</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Badge.html">Badge</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Label.html">Label</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/菜单组件.html">菜单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Menu.html">Menu</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuBody.html">MenuBody</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuHeader.html">MenuHeader</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuItem.html">MenuItem</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuList.html">MenuList</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/MenuNav.html">MenuNav</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/表单组件.html">表单组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Input.html">Input</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Switch.html">Switch</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/FormGroup.html">FormGroup</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/TextArea.html">TextArea</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/辅助组件.html">辅助组件</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Drag.html">Drag</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Animate.html">Animate</a>
<ul>
</ul>
</li>
</ul>
</dd>
<dt>
<span class="glyphicon glyphicon-minus"></span>
<a href="../modules/选项卡.html">选项卡</a>
</dt>
<dd>
<ul>
<li>
<a href="../classes/Tab.html">Tab</a>
<ul>
</ul>
</li>
<li>
<a href="../classes/Tabset.html">Tabset</a>
<ul>
</ul>
</li>
</ul>
</dd>
</dl>
<div class="icon-sidebar-btn icon-sidebar-btn-open"><span class="glyphicon glyphicon-chevron-left"></span>收起</div>
</div>
<div class="stdoc-content">
<div class="apidocs">
<div id="docs-main">
<div class="content">
<div class="page-header">
<h1>Prompt</h1>
</div>
<div class="well well-small sign-left3">
<div class="stdoc-code"><p>Prompt组件<br/></p>
<ul>
<li>由于弹框的显示操作在组件以外, 所以需要在使用时自定义<code>visible</code>、<code>onClose</code>函数。</li>
<li>可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)</li>
<li>按钮默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。。</li>
<li>通过visible设置弹框是否显示, 可选true/false, 必需。</li>
<li>可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。</li>
<li>可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。</li>
<li>默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。</li>
</ul>
<p>主要属性和接口：</p>
<ul>
<li>title:弹框的标题，必需。</li>
<li>content:弹框的内容，必需。</li>
<li>buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击按钮的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。</li>
<li>onConfirm:点击确定按钮的回调，返回input的value。</li>
<li>visible:弹框是否显示标识, 默认false不可见。</li>
<li>onClose:关闭弹框的功能函数。</li>
<li>closeButton:右上角关闭按钮是否显示的标识, 默认不显示。</li>
<li>shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。</li>
</ul>
<p>示例:</p>
<pre><code class="lang-code"> const buttons = [
{text: "取消", phStyle: "gray", otherProps: {hollow: true}}, // text默认"确定", phStyle默认primary，onHandle默认onClose
{text: "确定", onHandle: this.onConfirm}
];
...
<Prompt closeButton shadowDisabled visible={this.state.visible} onClose={::this.onClose.bind(this,'visible')}
title="这是标题" content="这里是弹出框的内容..." buttons={buttons} /></code></pre>
</div>
</div>
<div class="well well-small sign-left2 container-fluid" id="classesItems">
<div class="row">
<div class="index-section methods col-sm-4">
<h3>方法</h3>
<ul class="index-list methods extends">
<li class="index-item method">
<a href="#" data-tabid="#method" data-anchor="#method_onClose" data-tablink="onClose">onClose</a>
</li>
<li class="index-item method">
<a href="#" data-tabid="#method" data-anchor="#method_onConfirm" data-tablink="onConfirm">onConfirm</a>
</li>
</ul>
</div>
<div class="index-section properties col-sm-4">
<h3>属性</h3>
<ul class="index-list properties extends">
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_buttons" data-tablink="buttons">buttons</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_buttons" data-tablink="buttons">buttons</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_closeButton" data-tablink="closeButton">closeButton</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_shadowDisabled" data-tablink="shadowDisabled">shadowDisabled</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_title" data-tablink="title">title</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_title" data-tablink="title">title</a>
</li>
<li class="index-item property">
<a href="#" data-tabid="#property" data-anchor="#property_visible" data-tablink="visible">visible</a>
</li>
</ul>
</div>
<div class="index-section events col-sm-4">
<h3>事件</h3>
</div>
</div>
</div>
<div class="">
<ul id="itemTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#class">详情</a></li>
<li class=""><a data-toggle="tab" href="#method">方法</a></li>
<li class=""><a data-toggle="tab" href="#property">属性</a></li>
</ul>
<div class="tab-content">
<div id="class" class="tab-pane active">
<div class="well well-small classDetail sign-left1">
<div class="extends">
Extends Component
</div>
<div class="foundat">
Defined in: <a href="../files/src_modal_Prompt.js.html#l11"><code>src/modal/Prompt.js:11</code></a>
</div>
Module: <a href="../modules/弹出框组件.html">弹出框组件</a>
<p>Available since 1.5.0</p>
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_Prompt" class="method item">
<h3 class="name">Prompt</h3>
<code>
Prompt
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l11"><code>src/modal/Prompt.js:11</code></a>
</p>
<p>Available since 1.5.0</p>
</div>
<div class="description well well-small sign-left3">
</div>
<div class="example app-example">
<h4>Example:</h4>
<ul class="nav nav-tabs example-list">
<li role="presentation" class="active" data-demo="https://future-team.github.io/phoenix-ui/examples/index.html#/prompt" _no='0'> <a>展示</a></li>
</ul>
<div class="example-content showdemo ">
<div class="stdoc-code"><pre class="code prettyprint"><code>import React, { Component } from "react";
import {Prompt, Button} from "phoenix-ui";
import Code from "./code/code";
export default class prompt extends Component{
constructor(props,context){
super(props,context);
this.state = {
visible1: false,
visible2: false,
visible3: false,
visible4: false,
inputName: "",
inputPassword: ""
}
}
onClose(key){
let o = {};
o[key] = false;
this.setState(o);
}
onConfirm(valueArr){ // 返回input值的数组
console.log(valueArr);
this.onClose('visible2');
}
onUserNameChange(userName){
console.log(userName);
}
onPasswordChange(password){
console.log(password);
}
render(){
const buttons = [
// text默认"确定", phStyle默认primary，onHandle默认onClose, otherProps传按钮的属性
{text: "取消", phStyle: "gray", otherProps: {hollow: true}, onHandle: this.onConfirm.bind(this)},
{text: "提交", onHandle: this.onConfirm.bind(this)}
];
const inputs = [
// type默认text，其他属性可选，按照正常输入;
{defaultValue: "hah", placeholder: "用户名", maxLength: 10, onChange: this.onUserNameChange.bind(this)},
{type: "password", placeholder: "密码", onChange: this.onPasswordChange.bind(this)}
];
return(
<div>
<h2 className="comp-title">Prompt</h2>
<h3 className="comp-type">title 定义标题; content 定义内容</h3>
<div className="content">
<h3 className="comp-tip">默认有[取消, 确定]2个按钮，点击[取消]默认的执行函数是直接关闭，点击[确定]通过传入的onConfirm函数可获取input的value数组，可自行添加回调。</h3>
<Button radius phSize="lg" onClick={()=>{this.setState({visible1:true})}}>Prompt默认状态</Button>
</div>
<Prompt visible={this.state.visible1} onClose={::this.onClose.bind(this,"visible1")} title="这是标题" content="这里是弹出框的内容..."
onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible1"); }} />
<Code target="prompt" />
<h3 className="comp-type">buttons 定义尾部按钮</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible2:true})}}>自定义按钮buttons</Button>
</div>
<Prompt visible={this.state.visible2} onClose={::this.onClose.bind(this,"visible2")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons} />
<Code target="prompt-buttons" />
<h3 className="comp-type">inputs 定义内容区域文本框</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible3:true})}}>自定义inputs</Button>
</div>
<Prompt visible={this.state.visible3} onClose={::this.onClose.bind(this,"visible3")} title="这是标题" content="这里是弹出框的内容..." inputs={inputs}
onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible3"); }} />
<Code target="prompt-inputs" />
<h3 className="comp-type">其他属性(visible、onClose、closeButton、shadowDisabled)参照<a href="#/dialog">Dialog</a>组件</h3>
<div className="content">
<Button radius phSize="lg" onClick={()=>{this.setState({visible4:true})}}>完整案例</Button>
</div>
<Prompt visible={this.state.visible4} onClose={::this.onClose.bind(this,"visible4")} closeButton shadowDisabled
title="这是标题" content="这里是弹出框的内容..." onConfirm={(inputValue)=>{ console.log(inputValue); this.onClose("visible4"); }} />
<Code target="prompt-whole" />
</div>
);
}
}</code></pre>
</div>
</div>
<div class="btn-method-box">
<button class="btn btn-info btn-viewDemo" type="button">查看示例</button>
<button class="btn btn-info btn-editDemo" type="button">编辑代码</button>
</div>
<div class="device"></div>
</div>
</div>
</div>
</div>
<div id="method" class="tab-pane">
<h2 class="off-left">方法</h2>
<div id="method_onClose" class="method item">
<h3 class="name">onClose</h3>
<code>
onClose
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l84"><code>src/modal/Prompt.js:84</code></a>
</p>
</div>
<div class="description well well-small sign-left3">
<div class="stdoc-code"><p>关闭弹框的执行函数</p>
</div>
</div>
</div>
<div id="method_onConfirm" class="method item">
<h3 class="name">onConfirm</h3>
<code>
onConfirm
<span class="paren">()</span>
</code>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l90"><code>src/modal/Prompt.js:90</code></a>
</p>
</div>
<div class="description well well-small sign-left3">
<div class="stdoc-code"><p>点击确定的回调函数</p>
</div>
</div>
</div>
</div>
<div id="property" class="tab-pane">
<h2 class="off-left">属性</h2>
<div id="property_buttons" class="property item">
<h3 class="name"><code>buttons</code></h3>
<span class="type">Array</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l66"><code>src/modal/Prompt.js:66</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>尾部按钮</p>
</div>
</div>
</div>
<div id="property_buttons" class="property item">
<h3 class="name"><code>buttons</code></h3>
<span class="type">Array</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l72"><code>src/modal/Prompt.js:72</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>内容区域文本框</p>
</div>
</div>
</div>
<div id="property_closeButton" class="property item">
<h3 class="name"><code>closeButton</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l96"><code>src/modal/Prompt.js:96</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>右上角按钮是否可见, 默认不可见</p>
</div>
</div>
</div>
<div id="property_shadowDisabled" class="property item">
<h3 class="name"><code>shadowDisabled</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l102"><code>src/modal/Prompt.js:102</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>阴影部分是否点击可关闭弹框, 默认传了onClose之后可关闭</p>
</div>
</div>
</div>
<div id="property_title" class="property item">
<h3 class="name"><code>title</code></h3>
<span class="type">String</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l54"><code>src/modal/Prompt.js:54</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>标题</p>
</div>
</div>
</div>
<div id="property_title" class="property item">
<h3 class="name"><code>title</code></h3>
<span class="type">String</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l60"><code>src/modal/Prompt.js:60</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>内容</p>
</div>
</div>
</div>
<div id="property_visible" class="property item">
<h3 class="name"><code>visible</code></h3>
<span class="type">Boolean</span>
<div class="meta">
<p class="foundat">
Defined in
<a href="../files/src_modal_Prompt.js.html#l78"><code>src/modal/Prompt.js:78</code></a>
</p>
</div>
<div class="description">
<div class="stdoc-code"><p>是否可见标识</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a id="gotoTop" class='well well-small' href='#'>
</a>
<script src="../assets/vendor/jquery/jquery-1.8.2.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/doc.js"></script>
</body>
</html>