Tips

Properties

Property	Type	Required	Default value	Description
image	string	No	-	The URL of the image to display.
title	string	Yes	-	The tip text.
arrowPosition	'top-left' | 'top-center' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom-center' | 'bottom-right'	No	-	The position of the arrow. If this property is not set, no arrow is displayed.
buttonText	string	No	-	The text of the button.
showClose	boolean	No	false	Specifies whether to display a Close button.
buttonPosition	'right' | 'bottom'	No	'right'	The position of the text button. Default: right.
className	string	No	-	The custom class name.

Events

Event name	Description	Type
onButtonTap	Triggered when the button is tapped.	() => void

Style classes

Class name	Description
amd-tips	The overall style of the Tips component.
amd-tips-wrap	The internal wrapper style.
amd-tips-wrap-pseudo	Style of the visible content area.
amd-tips-wrap-pseudo-content	Style of the visible content area.
amd-tips-arrow	The arrow style.
amd-tips-wrap-real	Style of the actual content area.

Code examples

Basic usage

Sample code for index.axml:

<view class="demo">
  <view class="display-area">
    <tips 
      title="{{title}}"
      buttonText="{{buttonText}}"
      buttonPosition="{{buttonPosition}}"
      image="{{showImage ? image : ''}}"
      showClose="{{showClose}}"
      arrowPosition="{{tipsArrow[arrowPosition].name}}"
      onButtonTap="onButtonTap"/>
  </view>
  <list radius>
    <list-item>
      Show image<switch slot="extra" checked="{{showImage}}" onChange="handleChangeShowImage" controlled />
    </list-item>
    <list-item>
      Show Close icon<switch slot="extra" checked="{{showClose}}" onChange="handleChangeShowClose" controlled />
    </list-item>
    <list-item>
      Title
      <input-item value="{{title}}" onChange="handleChangeTitle" controlled slot="extra" clear="{{false}}"/>
    </list-item>
    <list-item>
      Button text
      <input-item value="{{buttonText}}" onChange="handleChangeButtonText" controlled slot="extra" clear="{{false}}"/>
    </list-item>
    <radio-group header="Arrow position" uid="arrowPosition" value="{{arrowPosition}}" controlled onChange="handleChangeArrowPosition">
      <radio-item a:for="{{tipsArrow}}" value="{{item.value}}" uid="arrowPosition">{{item.name||'No arrow'}}</radio-item>
    </radio-group>
    <radio-group header="Button position" uid="buttonPosition" onChange="handleChangeButtonPosition" value="{{buttonPosition}}" controlled>
      <radio-item value="right" uid="buttonPosition">Right</radio-item>
      <radio-item value="bottom" uid="buttonPosition">Bottom</radio-item>
    </radio-group>
  </list>
</view>

Sample code for index.js:

Page({
  data: {
    image:
      'https://gw.alipayobjects.com/zos/rmsportal/AzRAgQXlnNbEwQRvEwiu.png',
    tipsArrow: [
      { name: '', value: '0' },
      { name: 'top-left', value: '1' },
      { name: 'top-center', value: '2' },
      { name: 'top-right', value: '3' },
      { name: 'left', value: '4' },
      { name: 'right', value: '5' },
      { name: 'bottom-left', value: '6' },
      { name: 'bottom-center', value: '7' },
      { name: 'bottom-right', value: '8' },
    ],
    title: 'This is a tip box',
    buttonText: 'Action button',
    showImage: true,
    showClose: true,
    arrowPosition: '2',
    buttonPosition: 'right',
  },
  handleChangeShowImage(checked) {
    this.setData({ showImage: checked });
  },
  handleChangeShowClose(checked) {
    this.setData({ showClose: checked });
  },
  handleChangeTitle(value) {
    this.setData({ title: value });
  },
  handleChangeButtonText(value) {
    this.setData({ buttonText: value });
  },
  handleChangeButtonPosition(value) {
    this.setData({ buttonPosition: value });
  },
  handleChangeArrowPosition(value) {
    this.setData({ arrowPosition: value });
  },
  handleClose() {
    my.alert({
      title: 'Close tag tapped',
      content: 'Tips component closed',
    });
  },
  handleTapBtn() {
    my.alert({
      title: 'Button tapped',
      content: 'onButtonTap on the page was tapped',
    });
  },
});

Sample code for index.acss:

.display-area {
  min-height: 100px;
  padding: 40rpx 12px 12px;
  box-sizing: border-box;
  overflow: hidden;
}

.demo {
  padding-bottom: 40rpx;
}

Sample code for index.json:

{
  "defaultTitle": "Tips",
  "usingComponents": {
    "list": "antd-mini/es/List/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "input-item": "antd-mini/es/InputItem/index",
    "tips": "antd-mini/es/Tips/index",
    "switch": "antd-mini/es/Switch/index",
    "radio-group": "antd-mini/es/RadioGroup/index",
    "radio-item": "antd-mini/es/RadioGroup/RadioItem/index"
  }
}

Slots

Sample code for index.axml:

<tips arrowPosition="bottom-center" showClose="{{false}}">
    Default slot
</tips>

Sample code for index.js:

Page({});

Sample code for index.json:

{
    "defaultTitle": "TipsSlot",
    "usingComponents": {
      "tips": "antd-mini/es/Tips/index"
    }
  }

Close the component

Sample code for index.axml:

<view class="demo">
    
    <tips title="Controlled close" showClose="{{true}}" onClose="onClose" visible="{{visible}}" />
    
    <button class="btn" type="primary" onTap="onTap">
        {{visible === true ? 'Close' : 'Open'}}
    </button>
</view>

Sample code for index.js:

Page({
  data: {
    visible: true,
  },
  onTap() {
    this.setData({
      visible: !this.data.visible,
    });
  },
  onClose() {
    my.alert({
      content: 'Component closed',
    });
  },
});

Sample code for index.acss:

.btn {
  margin: 24rpx 0;
  display: block;
}
.demo {
  display: flex;
  flex-direction: column;
  padding: 24rpx;
}

Sample code for index.json:

{
  "usingComponents": {
    "button": "antd-mini/es/Button",
    "tips": "antd-mini/es/Tips"
  }
}