Browse Source

move confirm into modal

pull/21/head
afc163 10 years ago
parent
commit
646c6853d6
  1. 23
      components/confirm/demo/basic.md
  2. 25
      components/confirm/index.md
  3. 0
      components/modal/confirm.jsx
  4. 27
      components/modal/demo/confirm.md
  5. 17
      components/modal/index.md
  6. 2
      index.js
  7. 11
      style/components/confirm.less

23
components/confirm/demo/basic.md

@ -1,23 +0,0 @@
# 基本
- order: 0
使用很简单。
---
````jsx
var confirm = antd.confirm;
function showConfirm(){
confirm({
title: '第一个 confirm',
content: 'confirm 内容'
});
}
React.render(
<button className="ant-btn ant-btn-primary" onClick={showConfirm}>
显示确认框
</button>, document.getElementById('components-confirm-demo-basic'));
````

25
components/confirm/index.md

@ -1,25 +0,0 @@
# Confirm
- order: 2
- category: Components
- chinese: 确认对话框
---
## 何时使用
当需要用户确认时使用
## api
为一个方法,参数为 object,具体属性如下
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element or String | 无 |
| onOk | 点击确定回调,参数为关闭函数 | function | 无 |
| onCancel | 取消回调,参数为关闭函数 | function | 无 |
| width | 宽度 | String or Number | 375 |
| iconClassName | 图标央样式名 | String | anticon-exclamation-circle |

0
components/confirm/index.jsx → components/modal/confirm.jsx

27
components/modal/demo/confirm.md

@ -0,0 +1,27 @@
# 确认对话框
- order: 3
使用 `confirm()` 可以快捷地弹出确认框。
---
````jsx
var confirm = antd.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
onOk: function() {
alert('确定');
},
onCancel: function() {}
});
}
React.render(
<button className="ant-btn" onClick={showConfirm}>
确认对话框
</button>, document.getElementById('components-modal-demo-confirm'));
````

17
components/modal/index.md

@ -12,9 +12,11 @@
需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 `Modal` 在当前页面正中打开一个浮层,承载相应的操作。
另外当需要一个简洁的确认框询问用户时,可以使用精心封装好的 `ant.confirm()`
## API
属性列表
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
@ -23,3 +25,16 @@
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
| width | 宽度 | String or Number | 500 |
| footer | 底部内容 | React.Element | 确定取消按钮 |
### confirm()
`confirm` 为一个方法,参数为 object,具体属性如下:
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element or String | 无 |
| onOk | 点击确定回调,参数为关闭函数 | function | 无 |
| onCancel | 取消回调,参数为关闭函数 | function | 无 |
| width | 宽度 | String or Number | 375 |
| iconClassName | 图标样式名 | String | anticon-exclamation-circle |

2
index.js

@ -9,7 +9,7 @@ var antd = {
Dropdown: require('./components/dropdown'),
Progress: require('./components/progress'),
Select: require('./components/select'),
confirm: require('./components/confirm')
confirm: require('./components/modal/confirm')
};
module.exports = window.antd = antd;

11
style/components/confirm.less

@ -12,20 +12,25 @@
.@{confirmPrefixCls}-body {
.@{confirmPrefixCls}-content {
margin-left: 33px;
margin-left: 37px;
font-size: 12px;
color: #999;
}
.anticon {
font-size: 24px;
display: inline-block;
margin-right: 5px;
margin-right: 12px;
position: relative;
top: 2px;
}
.anticon-exclamation-circle {
color: #fac450;
}
.anticon-question-circle {
color: #2CB7ED;
}
}
.@{confirmPrefixCls}-btns {

Loading…
Cancel
Save