zarm-web
Version:
基于 React 的桌面端UI库
199 lines (175 loc) • 6.9 kB
Markdown
## Modal 模态框
在当前页面打开一个模态对话框。
### 基础用法
Modal组件的基础用法。
:::demo 可以通过`Modal.Header`,`Modal.Body`,`Modal.Footer`子组件定义模态框的不同部分。
```js
constructor(props) {
super(props);
this.state = {
modalVisible: false,
modalVisible2: false,
modalVisible3: false,
};
}
toggleModal(key) {
this.setState({
[key]: !this.state[key]
});
}
toggleModal2() {
this.setState({
modalVisible2: !this.state.modalVisible2
});
}
toggleModal3() {
this.setState({
modalVisible3: !this.state.modalVisible3
});
}
render() {
const { modalVisible, modalVisible2, modalVisible3 } = this.state;
return (
<div>
<Button theme="info" onClick={() => this.toggleModal('modalVisible')}>展示模态框</Button>
<Modal visible={modalVisible} animationType="slideRight">
<Modal.Header title="我是弹框1" onClose={() => {this.toggleModal('modalVisible')}} />
<Modal.Body className="test">
<input name="ad"/>
我是模态框 <br/>我是模态框 <br/>我是模态框 <br/>我是模态框 <br/>我是模态框 <br/>我是模态框 <br/>我是模态框 <br/>
<Button onClick={() => this.toggleModal2()}>显示Modal2</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.toggleModal('modalVisible')}>取消</Button>
<Button theme="success" onClick={() => { alert('你点击了确定') }}>确定</Button>
</Modal.Footer>
</Modal>
<Modal visible={modalVisible2} animationType="slideRight">
<Modal.Header title="我是弹框2" onClose={() => this.toggleModal2()} />
<Modal.Body className="test">
我是模态框2 <br/>我是模态框2 <br/>我是模态框2 <br/>我是模态框2 <br/>我是模态框 2<br/>我是模态框2 <br/>我是模态框2 <br/>
<Button onClick={() => this.toggleModal3()}>显示Modal3</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.toggleModal2()}>取消</Button>
<Button theme="success" onClick={() => { alert('你点击了确定') }}>确定</Button>
</Modal.Footer>
</Modal>
<Modal visible={modalVisible3} animationType="slideRight">
<Modal.Header title="我是弹框3" onClose={() => this.toggleModal3()} />
<Modal.Body className="test">
我是模态框3 <br/>我是模态框3<br/>我是模态框3<br/>我是模态框3 <br/>我是模态框 2<br/>我是模态框2 <br/>我是模态框2 <br/>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.toggleModal3()}>取消</Button>
<Button theme="success" onClick={() => { alert('你点击了确定') }}>确定</Button>
</Modal.Footer>
</Modal>
</div>
)
}
```
:::
### 不同的动画
支持多种展示动画。
:::demo 可以通过`animationType`属性设置不同的动画方式，默认`zoom`。
```js
constructor(props) {
super(props);
this.state = {
modalVisible: false,
animationType: 'zoom'
};
}
toggleModal(animationType) {
this.setState({
modalVisible: !this.state.modalVisible,
animationType
});
}
render() {
const { modalVisible, animationType } = this.state;
return (
<div className="buttons">
<Button onClick={() => this.toggleModal('zoom')}>zoom</Button>
<Button onClick={() => this.toggleModal('door')}>door</Button>
<Button onClick={() => this.toggleModal('flip')}>flip</Button>
<Button onClick={() => this.toggleModal('rotate')}>rotate</Button>
<Button onClick={() => this.toggleModal('slideUp')}>slideUp</Button>
<Button onClick={() => this.toggleModal('slideDown')}>slideDown</Button>
<Button onClick={() => this.toggleModal('slideLeft')}>slideLeft</Button>
<Button onClick={() => this.toggleModal('slideRight')}>slideRight</Button>
<Button onClick={() => this.toggleModal('moveUp')}>moveUp</Button>
<Button onClick={() => this.toggleModal('moveDown')}>moveDown</Button>
<Button onClick={() => this.toggleModal('moveLeft')}>moveLeft</Button>
<Button onClick={() => this.toggleModal('moveRight')}>moveRight</Button>
<Modal visible={modalVisible} animationType={animationType}>
<Modal.Header title="标题" onClose={() => this.toggleModal()} />
<Modal.Body>
我是一个模态框
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.toggleModal()}>取消</Button>
<Button theme="success" onClick={() => { alert('你点击了确定') }}>确定</Button>
</Modal.Footer>
</Modal>
</div>
)
}
```
:::
### 圆角模态框
可以设置圆角模态框。
:::demo 使用`radius`属性设置圆角
```js
constructor(props) {
super(props);
this.state = {
modalVisible: false
};
}
toggleModal() {
this.setState({
modalVisible: !this.state.modalVisible
});
}
render() {
const { modalVisible } = this.state;
return (
<div>
<Button theme="info" onClick={() => this.toggleModal()}>圆角模态框</Button>
<Modal visible={modalVisible} radius>
<Modal.Header title="标题" onClose={() => this.toggleModal()} />
<Modal.Body>
我是一个模态框
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.toggleModal()}>取消</Button>
<Button theme="success" onClick={() => { alert('你点击了确定') }}>确定</Button>
</Modal.Footer>
</Modal>
</div>
)
}
```
:::
### Modal Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| visible | 是否可见 | boolean | - | false |
| width | 宽度 | number | - | 600 |
| radius | 是否圆角 | boolean | - | false |
| animationType | 动画方式 | string | zoom,door,flip... | zoom |
| animationDuration | 动画时长(ms) | number | - | 300 |
### Modal Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| onMaskClick | 点击遮罩触发的事件 | — |
### Modal.Header Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 标题 | string | - | '' |
### Modal.Header Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| onClose | 点击关闭图标触发的事件 | — |