UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

108 lines (87 loc) 5.14 kB
--- 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 |