Toast

Properties

Property	Type	Required	Default value	Description
type	string	No	-	The toast type, which displays a corresponding icon. Valid values: `success`, `fail`, `warning`, and `loading`.
content	string	Yes	-	The toast text.
icon	Icon type	No	-	A custom icon for the toast.
image	string	No	-	A custom image for the toast.
duration	number	No	2000 ms	How long the toast is displayed, in milliseconds. Set to 0 to prevent the toast from closing automatically.
visible	boolean	Yes	false	Whether the toast is visible.
showMask	boolean	No	false	Whether to show a mask layer.
maskCloseable	boolean	No	false	Whether the toast closes when the mask layer is tapped.
className	string	No	-	A custom CSS class name.

Events

Event name	Description	Type
onClose	Callback invoked after the toast closes.	(e) => void

Style classes

Class name	Description
amd-toast-wrapper	The wrapper style.
amd-toastWithIcon-wrapper	The wrapper style when an icon is present.
amd-toast-icon	The icon style.

Code examples

Basic usage

Sample index.axml file:

<button onTap="handleShowToast" data-index="1" class="button" inline="{{true}}" inlineSize="{{medium}}">
  Text-only toast
</button>

<button onTap="handleShowToast" data-index="4" class="button" inline="{{true}}" inlineSize="{{medium}}">
  Text-only toast, long text
</button>

<button onTap="handleShowToast" data-index="2" class="button" inline="{{true}}" inlineSize="{{medium}}">
  Custom icon
</button>

<button onTap="handleShowToast" data-index="5" class="button" inline="{{true}}" inlineSize="{{medium}}">
  Custom image
</button>

<button onTap="handleShowToast" data-index="3" class="button" inline="{{true}}" inlineSize="{{medium}}">
  Toast lasts for 3s
</button>

<button onTap="handleShowToast" data-index="6" class="button" inline="{{true}}" inlineSize="{{medium}}">
  type = loading
</button>

<toast
  content="{{content1}}"
  visible="{{toast1Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="1"
  class="toastWrapper"
/>

<toast 
  content="{{content4}}"
  visible="{{toast4Show}}"
  data-index="4"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  class="toastWrapper"
/>

<toast
  content="{{content5}}"
  icon="{{icon2}}"
  visible="{{toast2Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="2"
  class="toastWrapper"
/>

<toast
  content="{{content2}}"
  image="{{image1}}"
  visible="{{toast5Show}}"
  duration="{{0}}"
  showMask="{{true}}"
  maskCloseable="{{true}}"
  onClose="handleCloseToast"
  data-index="5"
  class="toastWrapper"/>

<toast
  content="{{content3}}"
  visible="{{toast3Show}}"
  duration="{{3000}}"
  class="toastWrapper"
  data-index="3"
  onClose="handleCloseToast"
  showMask="{{true}}"
  maskCloseable="{{true}}"
/>

<toast
  content="{{content2}}"
  visible="{{toast6Show}}"
  class="toastWrapper"
  data-index="6"
  type="loading"
  onClose="handleCloseToast"
  showMask="{{true}}"
  duration="{{0}}"
  maskCloseable="{{true}}"
/>

Sample index.js file:

Page({
  data: {
    toastShow: false,
    content1: "The text can be up to two lines long and display a maximum of 24 characters.",
    content2: "Loading...",
    content3: "This toast lasts for 3 seconds.",
    content4: "This is a very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long text.",
    content5: "Welcome to the new version.",
    toast1Show: false,
    toast2Show: false,
    toast3Show: false,
    toast4Show: false,
    toast5Show: false,
    toast6Show: false,
    icon2: "LikeOutline",
    image1: 'https://gw.alipayobjects.com/mdn/rms_5118be/afts/img/A*4NPGQ66arP0AAAAAAAAAAAAAARQnAQ'
  },

  handleShowToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      toast1Show: false,
      toast2Show: false,
      toast3Show: false,
      toast4Show: false,
      toast5Show: false,
      toast6Show: false,
    })

    this.setData({
      [`toast${index}Show`]: true
    })

    console.log(this.data)
  },

  handleCloseToast(e) {
    const { index }  = e.target.dataset;
    this.setData({
      [`toast${index}Show`]: false
    })
  }
});

Sample index.acss file:

.toastWrapper {

}

.image {
  width: 80rpx;
  height: 80rpx;
}

.button {
  margin-left: 12px;
}

Sample index.json file:

{
  "defaultTitle": "Toast",
  "usingComponents": {
    "toast": "antd-mini/es/Toast/index",
    "button": "antd-mini/es/Button/index"
  }
}