This topic describes tips. Tips can be divided into two types, tips-dialog
and tips-plain
.
tips-dialog
Attribute |
Description |
Type |
Default value |
Mandatory |
className |
Custom class |
String |
- |
false |
show |
Whether to display the component. |
Boolean |
true |
false |
type |
Style of tips. The value can be dialog or rectangle , indicating the dialog box or rectangle, respectively. |
String |
dialog |
false |
onCloseTap |
Callback when you tap the icon to close and when type is set to rectangle . |
() => void |
- |
false |
iconUrl |
Displays the URL of the icon. |
String |
- |
false |
slots
slotName |
Description |
content |
Used to render the content of the tip. |
operation |
Used to render the operation area on the right. |
tips-plain
Attribute |
Description |
Type |
Default value |
Mandatory |
className |
Custom class |
String |
- |
false |
time |
Time of automatic close, in ms. |
Number |
5000 (ms) |
false |
onClose |
Callback and closes the dialog box. |
() => void |
- |
false |
Sample code
{
"defaultTitle": "AntUI component library of the Mini Program",
"usingComponents": {
"tips-dialog": "mini-antui/es/tips/tips-dialog/index",
"tips-plain": "mini-antui/es/tips/tips-plain/index"
}
}
tips-dialog
<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 library mini-antui</view>
</view>
<view slot="operation" class="opt-button" onTap="onDialogTap">OK</view>
</tips-dialog>
<tips-dialog
iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png"
type="rectangle"
className="rectangle"
onCloseTap="onCloseTap"
show="{{showRectangle}}">
<view class="content" slot="content">
Add "City Service" to homepage
</view>
<view slot="operation" class="add-home" onTap="onRectangleTap">Add now</view>
</tips-dialog>
</view>
Page({
data: {
showRectangle: true,
showDialog: true,
},
onCloseTap() {
this.setData({
showRectangle: false,
});
},
onRectangleTap() {
my.alert({
content: 'do something',
});
},
onDialogTap() {
this.setData({
showDialog: false,
});
},
});
.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
<tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
Page({
data: {
content: 'OK',
time: 2000,
},
onClose() {
my.alert({
title: '12321'
});
}
});