All Products
Search
Document Center

Tips

Last Updated: Feb 04, 2021

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

  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "tips-dialog": "mini-antui/es/tips/tips-dialog/index",
  5. "tips-plain": "mini-antui/es/tips/tips-plain/index"
  6. }
  7. }

tips-dialog

  1. <view>
  2. <tips-dialog
  3. show="{{showDialog}}"
  4. className="dialog"
  5. type="dialog"
  6. >
  7. <view class="content" slot="content">
  8. <view>hello,</view>
  9. <view>Welcome to use the mini-program extension library mini-antui</view>
  10. </view>
  11. <view slot="operation" class="opt-button" onTap="onDialogTap">OK</view>
  12. </tips-dialog>
  13. <tips-dialog
  14. iconUrl="https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png"
  15. type="rectangle"
  16. className="rectangle"
  17. onCloseTap="onCloseTap"
  18. show="{{showRectangle}}">
  19. <view class="content" slot="content">
  20. Add "City Service" to homepage
  21. </view>
  22. <view slot="operation" class="add-home" onTap="onRectangleTap">Add now</view>
  23. </tips-dialog>
  24. </view>
  1. Page({
  2. data: {
  3. showRectangle: true,
  4. showDialog: true,
  5. },
  6. onCloseTap() {
  7. this.setData({
  8. showRectangle: false,
  9. });
  10. },
  11. onRectangleTap() {
  12. my.alert({
  13. content: 'do something',
  14. });
  15. },
  16. onDialogTap() {
  17. this.setData({
  18. showDialog: false,
  19. });
  20. },
  21. });
  1. .rectangle {
  2. position: fixed;
  3. bottom: 100px;
  4. }
  5. .dialog {
  6. position: fixed;
  7. bottom: 10px;
  8. }
  9. .content {
  10. font-size: 14px;
  11. color: #fff;
  12. }
  13. .opt-button {
  14. width: 51px;
  15. height: 27px;
  16. display: flex;
  17. justify-content: center;
  18. align-items: center;
  19. color: #fff;
  20. font-size: 12px;
  21. border: #68BAF7 solid 1rpx;
  22. }
  23. .add-home {
  24. width: 72px;
  25. height: 27px;
  26. display: flex;
  27. justify-content: center;
  28. align-items: center;
  29. background-color: #56ADEB;
  30. color: #fff;
  31. font-size: 14px;
  32. }

tips-plain

  1. <tips-plain onClose="onClose" time="{{time}}">{{content}}</tips-plain>
  1. Page({
  2. data: {
  3. content: 'OK',
  4. time: 2000,
  5. },
  6. onClose() {
  7. my.alert({
  8. title: '12321'
  9. });
  10. }
  11. });