UI Views - Modal对话框 - 《Ant Design Mobile v0.8.x 组件文档》

Modal 对话框
- 规则
代码演示
API

用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。

规则

尽可能少用。Modal 会打断用户操作，只用在重要的时候。
标题应该简明，不能超过 1 行；描述内容应该简明、完整，一般不多于 2 行。
操作按钮最多到 3 个（竖排），一般为 1-2 个（横排）；3 个以上建议使用组件 ActionSheet 来完成。
一般将用户最可能点击的按钮，放在右侧。另外，取消按钮应当始终放在左侧。

代码演示

基本使用方式, 弹出一个浮层

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="lg" />
        <WingBlank>
          <Button type="ghost" onClick={this.showModal}>
            显示全屏对话框
          </Button>
          <Modal visible={this.state.visible} closable={false}>
            <div style={{ height: '50%', paddingTop: 200 }}>
              这是内容...<br />
              这是内容...<br />
            </div>
            <Button type="primary" inline onClick={this.onClose}>close modal</Button>
          </Modal>
        </WingBlank>
        <WhiteSpace size="lg" />
      </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="lg" />
        <WingBlank>
          <Button type="ghost" onClick={this.showModal}>
            可关闭对话框
          </Button>
          <Modal
            title="这是 title"
            closable
            maskClosable
            transparent
            onClose={this.onClose}
            visible={this.state.visible}
          >
            这是内容...<br />
            这是内容...<br />
          </Modal>
        </WingBlank>
        <WhiteSpace size="lg" />
      </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="lg" />
        <WingBlank>
          <Button type="ghost" onClick={this.showModal}>
            自定义对话框
          </Button>
          <Modal
            onClose={this.onClose}
            transparent
            visible={this.state.visible}
            footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose(); } }]}
          >
            <div className="modal-demo-content">
              <div className="demo-image">图片</div>
              <div className="demo-title">标题文字标题文字</div>
              <div className="demo-content">辅助说明文字辅助说明文字辅助说明文字辅助说明文字辅助说明文字辅助说明文字</div>
            </div>
          </Modal>
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

.demo-image {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  margin: 0 auto;
  background-color: #108ee9;
  line-height: 1.5rem;
  color: white;
}
.demo-title {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  font-size: 0.32rem;
  color: #000;
}
.demo-content {
  font-size: 0.26rem;
  color: #333;
}

弹出框

包含无按钮, 确认框, 多按钮情况

import { Modal, Button, WhiteSpace, WingBlank } from 'antd-mobile';
const alert = Modal.alert;
function showAlert() {
  alert('删除', '确定删除么???', [
    { text: 'cancel', onPress: () => console.log('cancel') },
    { text: 'ok', 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个按钮被点击了') },
  ]);
}
const App = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={showAlert}>自定义按钮 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={showConfirm}>确认对话框</Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={showMoreBtn}>弹出多个按钮 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
      </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',
  );
}
const App = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={plainTextPrompt}>输入框按钮按钮 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={passwordPrompt}>输入框密码形式 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={customBtnPrompt}>自定义按钮形式 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Button type="ghost" onClick={loginPwdPrompt}>输入框登录形式 </Button>
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(
  <App />
, mountNode);

API

参数	说明	类型	默认值
prefixCls (web only)	样式类名前缀	String	`am-modal`
visible	对话框是否可见	Boolean	false
onClose	点击 x 或 mask 回调	Function	无
title (only transparent)	标题	React.Element	无
closable	是否显示右上角的关闭按钮	Boolean	false
maskClosable (only transparent)	点击蒙层是否允许关闭	Boolean	false
footer (only not transparent)	底部内容	Array [{text, onpress}]	[]
transparent	是否弹窗模式	Boolean	true
style	样式	Object	透明模式下: {width: '286px', height: 'auto'}, 非透明模式: {width: '100%', height: '100%'} (web)

参数	说明	类型	默认值
title	标题	String 或 React.Element	无
message	提示信息	String 或 React.Element	无
actions	按钮组, [{text, onpress}]	Array	无

参数	说明	类型	默认值
title	标题	String 或 React.Element	无
message	提示信息	String 或 React.Element	无
callbackOrActions	按钮组 [{text, onpress}] 或回调函数	Array or Function	无
type	prompt 的样式	String (`default`, `secure-text`, `login-password`)	`default`

Modal对话框

Modal 对话框

规则

代码演示

API

Modal web & react native

Modal.alert(title, message, actions?) web only

Modal.prompt(title?, message?, callbackOrActions, type?) web only