antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
108 lines (87 loc) • 5.14 kB
Markdown
---
nav:
path: /components
group:
title: Feedback
order: 14
toc: 'content'
---
# Toast
Lightweight feedback on the results of the operation, without user action can disappear. The longest copy can be no more than 2 lines and can display up to 24 characters. If the copy is too long, it will be truncated.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-toast": "antd-mini/es/Toast/index"
#endif
#if WECHAT
"ant-toast": "antd-mini/Toast/index"
#endif
}
```
## Code Sample
### Basic use
```xml
<ant-toast
content="toast content"
visible="{{toastShow}}"
duration="{{0}}"
showMask="{{true}}"
maskCloseable="{{true}}"
#if ALIPAY
onClose="handleCloseToast"
#endif
#if WECHAT
bindclose="handleCloseToast"
#endif
/>
```
```js
Page({
data: {
toastShow: true,
},
handleCloseToast(e) {
this.setData({
toastShow: false,
});
},
});
```
### Icon type
> Incoming `type` property, you can use the built-in icon, optional `success`、`error`、`warning`、`loading`. Support `icon` property specifies [ant-icon](/components/icon) type, also supports `image` Property to customize the image.
```xml
<ant-toast content="success" type="success" visible="{{true}}" />
<ant-toast content="error" type="error" visible="{{true}}" />
<ant-toast content="warning" type="warning" visible="{{true}}" />
<ant-toast content="loading" type="loading" visible="{{true}}" />
<ant-toast content="icon" icon="LikeOutline" visible="{{true}}" />
<ant-toast content="custom image" image="https://gw.alipayobjects.com/mdn/rms_5118be/afts/img/A*4NPGQ66arP0AAAAAAAAAAAAAARQnAQ" visible="{{true}}" />
```
### Demo Code
<code src='../../demo/pages/Toast/index'></code>
## API
| Property | Description | Type | Default Value |
| --------------------- | ----------------------------------------------------------------- | ----------- | ------ |
| className | Component root node class name | string | - |
| content | Text content | string | - |
| duration | Duration, does not automatically close when 0 | number | 2000 |
| maskCloseable | Click whether the layer is closed | boolean | false |
| icon | Icon, supports all types of Icon components | string | - |
| image | Picture Link | string | - |
| maskStyle | Mat Style | string | - |
| showMask | Whether to show layer | boolean | false |
| style | Style | string | - |
| type | Built-in icon type, optional `success` `error` `warning` `loading` `alipay` | string | - |
| textType | Text type, optional `short` `long`the short type has a larger fillet | string | `long` |
| visible | Whether to hide | boolean | false |
| #if ALIPAY onClose | Callback after Toast is closed | (e) => void | - |
| #if WECHAT bindclose | Callback after Toast is closed | (e) => void | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Light Mode Default | Dark Mode Default | Remarks |
| --------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------ |
| --toast-default-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.75); color: #ffffff;">rgba(0, 0, 0, 0.75)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.75); color: #ffffff;">rgba(0, 0, 0, 0.75)</div> | Toast Default Background Color |
| --toast-default-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #000000;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #000000;">#ffffff</div> | Toast default text color |