Modal 对话框
定义/Definition
对话框通常是包含了某个特定任务或提醒,用来告知用户关键信息,要求用户作出决定或操作。当页操作弹出展示,可承载:提示、数据收集、信息确认、反馈信息、通知展示…规则 / Rule
多个Modal类组件同时被呼起时,会按先后顺序被缓存在队列中,前一个modal关闭后,下一个modal才会打开。
使用对话框时需要慎重考虑,因为其特性具有很强的干扰项。非不得已的情况下可以使用原生控件的下拉或展开方式替代。
应避免对话框里再弹对话框的情况。
代码演示
基本使用方式, 弹出一个浮层
可关闭的浮层
import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const App = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({
visible: true,
});
},
onClose() {
this.setState({
visible: false,
});
},
render() {
return (
<div>
<WhiteSpace size={20} />
<WingBlank>
<Button type="primary" onClick={this.showModal}>
显示对话框
</Button>
<Modal animated transparent={false} visible={this.state.visible} >
<div style={{ height: '50%', paddingTop: 200 }}>
这是内容...<br />
这是内容...<br />
</div>
<Button type="primary" inline onClick={this.onClose}>close modal</Button>
</Modal>
</WingBlank>
<WhiteSpace size={20} />
</div>
);
},
});
ReactDOM.render(
<App />
, mountNode);
包含无按钮, 确认框, 多按钮情况
import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const App = React.createClass({
getInitialState() {
return { visible: false };
},
showModal() {
this.setState({
visible: true,
});
},
onClose() {
this.setState({
visible: false,
});
},
render() {
return (
<div>
<WhiteSpace size={20} />
<WingBlank>
<Button type="primary" onClick={this.showModal}>
可关闭对话框
</Button>
<Modal title="1313123" animated={false} transparent closable maskClosable onClose={this.onClose} visible={this.state.visible}>
这是内容...<br />
这是内容...<br />
</Modal>
</WingBlank>
<WhiteSpace size={20} />
</div>
);
},
});
ReactDOM.render(
<App />
, mountNode);
包含输入普通文字, 密码, 登录信息样式
import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const alert = Modal.alert;
function showAlert() {
alert('删除', '确定删除么???', [
{ text: '取消', onPress: () => console.log('cancel') },
{ text: '确定', onPress: () => console.log('ok') },
]);
}
function showConfirm() {
alert('删除', '确定删除么???', [
{ text: '取消', onPress: () => console.log('cancel') },
{ text: '确定', onPress: () => console.log('ok') },
]);
}
function showMoreBtn() {
alert('多个按钮情况', <div>这里有好多个按钮, 你试试</div>, [
{ text: '按钮', onPress: () => console.log('第0个按钮被点击了') },
{ text: '按钮', onPress: () => console.log('第1个按钮被点击了') },
{ text: '按钮', onPress: () => console.log('第2个按钮被点击了') },
{ onPress: () => console.log('第3个按钮被点击了') },
]);
}
const App = React.createClass({
render() {
return (
<div>
<WhiteSpace size={20} />
<WingBlank size={20}>
<Button onClick={showAlert}>自定义按钮 </Button>
</WingBlank>
<WhiteSpace />
<WingBlank size={20}>
<Button onClick={showConfirm}>确认对话框</Button>
</WingBlank>
<WhiteSpace />
<WingBlank size={20}>
<Button onClick={showMoreBtn}>弹出多个按钮 </Button>
</WingBlank>
<WhiteSpace size={20} />
</div>
);
},
});
ReactDOM.render(
<App />
, mountNode);
import { Modal, Button, WingBlank, WhiteSpace } from 'antd-mobile';
const prompt = Modal.prompt;
function plainTextPrompt() {
prompt('输入名字', '这是名字的 message', [
{ text: '取消' },
{ text: '提交', onPress: value => console.log(`输入的内容:${value}`) },
]);
}
function passwordPrompt() {
prompt(
'输入密码',
'这是密码message,可以不要',
password => console.log(`password: ${password}`),
'secure-text',
);
}
function customBtnPrompt() {
prompt(
'输入密码',
'这是密码message,可以不要',
[
{ text: '取消' },
{ text: '提交', onPress: password => console.log(`密码为:${password}`) },
],
'secure-text',
);
}
function loginPwdPrompt() {
prompt(
'登录',
'输入用户名和密码',
(login, password) => console.log(`login: ${login}, password: ${password}`),
'login-password',
);
}
let App = React.createClass({
render() {
return (
<div>
<WhiteSpace size={20} />
<WingBlank size={20}>
<Button onClick={plainTextPrompt}>输入框按钮按钮 </Button>
</WingBlank>
<WhiteSpace />
<WingBlank size={20}>
<Button onClick={passwordPrompt}>输入框密码形式 </Button>
</WingBlank>
<WhiteSpace />
<WingBlank size={20}>
<Button onClick={customBtnPrompt}>自定义按钮形式 </Button>
</WingBlank>
<WhiteSpace />
<WingBlank size={20}>
<Button onClick={loginPwdPrompt}>输入框登录形式 </Button>
</WingBlank>
<WhiteSpace size={20} />
</div>
);
},
});
ReactDOM.render(
<App />
, mountNode);
API
Modal web & react native
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefixCls | 样式类名前缀 | String | am-modal |
visible | 对话框是否可见 | Boolean | false |
title | 标题 | React.Element | 无 |
closable | 是否显示右上角的关闭按钮 | Boolean | false |
maskClosable | 点击蒙层是否允许关闭 | Boolean | false |
footer | 底部内容 | React.Element | 无 |
onClose | 点击 x 或 mask 回调 | Function | 无 |
onShow | modal 显示回调 | Function | 无 |
animated | 是否展示动画 | Boolean | true |
transparent | 是否显示半透明 | Boolean | false |
style | 样式 | Object | 透明模式下: {width: '286px', height: 'auto'}, 非透明模式: {width: '100%', height: '100%'} (web) |
Modal.alert(title, message, actions?) web only
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | String 或 React.Element | 无 |
message | 提示信息 | String 或 React.Element | 无 |
actions | 按钮组, [{text, onpress}] | Array | 无 |
Modal.prompt(title?, message?, callbackOrActions, type?) web only
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | String 或 React.Element | 无 |
message | 提示信息 | String 或 React.Element | 无 |
callbackOrActions | 按钮组 [{text, onpress}] 或回调函数 | Array or Function | 无 |
type | prompt 的样式 | String (default , secure-text , login-password ) | default |