Tips
Tool tips Including two types tips-dialog
and tips-plain
.
tips-dialog
Property | Description | Type | Default | Required |
className | Custom class. | String | No | |
show | Show control component or not. | Boolean | true | No |
type | dialog indicates the style of dialog box, rectangle for rectangle style. | String | dialog | No |
onCloseTap | When the type value is rectangle , component clicking close the icon callback. | () Â => void | No | |
iconUrl | Show the icon url. | String | No |
Slots
slotName | Description |
content | Used to render tip text contents. |
operation | Used to render right-hand operation area. |
tips-plain
Property | Description | Type | Default | Required |
className | Custom class. | String | No | |
time | Automatic close time. (in milliseconds) | Number | 5000(ms) | No |
onClose | Callback and close tip box. | () Â => void | No |
Example
copy
{
"defaultTitle": "AntUI Component Library",
"usingComponents": {
"tips-dialog": "mini-antui/es/tips/tips-dialog/index",
"tips-plain": "mini-antui/es/tips/tips-plain/index"
}
}
tips-dialog
copy
<view>
<tips-dialog
show="{{showDialog}}"
className="dialog"
type="dialog"
>
<view class="content" slot="content">
<view>hello,</view>
<view>Welcome to use the Mini Program extension component library</view>
</view>
<view slot="operation" class="opt-button" onTap="onDialogTap">OK</view>
</tips-dialog>
<tips-dialog
iconUrl="https://img.example.com/example.png"
type="rectangle"
className="rectangle"
onCloseTap="onCloseTap"
show="{{showRectangle}}">
<view class="content" slot="content">
Add to home page
</view>
<view slot="operation" class="add-home" onTap="onRectangleTap">Add it now</view>
</tips-dialog>
</view>
copy
Page({
data: {
showRectangle: true,
showDialog: true,
},
onCloseTap() {
this.setData({
showRectangle: false,
});
},
onRectangleTap() {
my.alert({
content: 'do something',
});
},
onDialogTap() {
this.setData({
showDialog: false,
});
},
});
copy
.rectangle {
position: fixed;
bottom: 100px;
}
.dialog {
position: fixed;
bottom: 10px;
}
.content {
font-size: 14px;
color: #fff;
}
.opt-button {
width: 51px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
border: #68BAF7 solid 1rpx;
}
.add-home {
width: 72px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
background-color: #56ADEB;
color: #fff;
font-size: 14px;
}
tips-plain
copy
<tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
copy
Page({
data: {
content: 'OK',
time: 2000,
},
onClose() {
my.alert({
title: '12321'
});
}
});