Tips

2021-07-21 11:23

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'
    });
  }
});