Modal
Dialog box.
Property | Description | Type | Default |
className | Custom class. | String | |
show | Show modal or not. | Boolean | false |
showClose | Turn off render or not. | Boolean | true |
closeType | Close chart type 0: gray icon 1: white icon. | String | 0 |
onModalClick | Callback on clicking | () => void | |
onModalClose | Callback on clicking close , not required when showClose is false. | () => void | |
topImage | Top image. | String | |
topImageSize | Top image rule, options including | String | md |
advice | Is operation popup or not. | Boolean | false |
Slots
slotName | Description |
header | Optional, modal header. |
footer | Optional, modal footer. |
Example
copy
{
"defaultTitle": "AntUI Component Library",
"usingComponents": {
"modal": "mini-antui/es/modal/index"
}
}
copy
<view>
<button onTap="openModal">Show Modal</button>
<modal
show="{{modalOpened}}"
onModalClick="onModalClick"
onModalClose="onModalClose"
topImage="https://img.example.com/example.png"
>
<view slot="header">Title</view>
Explain the current status, prompt the user solution, preferably no more than two lines
<view slot="footer">Confirm</view>
</modal>
</view>
copy
Page({
data: {
modalOpened: false,
},
openModal() {
this.setData({
modalOpened: true,
});
},
onModalClick() {
this.setData({
modalOpened: false,
});
},
onModalClose() {
this.setData({
modalOpened: false,
});
}
});