Toast 轻提示
基本用法
```schema: scope=”body” [ { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘轻提示内容’} ] } }, { “label”: “提示2”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘轻提示内容2’} ] } }, ]
## 设置位置```schema: scope="body"{"label": "提示","type": "button","actionType": "toast","toast": {"position": "bottom-center","items": [{body: '轻提示内容2'}]}}
不展示关闭按钮
```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “closeButton”: false, “items”: [ {body: ‘轻提示内容’} ] } }
## 关闭图标展示```schema: scope="body"{"label": "提示","type": "button","actionType": "toast","toast": {"showIcon": false,"items": [{body: '轻提示内容'}]}}
持续时间设置
```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “timeout”: 1000, “items”: [ {body: ‘轻提示内容’} ] } }
## 带标题的提示```schema: scope="body"{"label": "提示","type": "button","actionType": "toast","toast": {"items": [{title: '标题', body: '轻提示内容'}]}}
提示单独设置不同的类型
```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘普通消息提示’, level: ‘info’}, {body: ‘成功消息提示’, level: ‘success’}, {body: ‘错误消息提示’, level: ‘error’}, {body: ‘警告消息提示’, level: ‘warning’} ] } }
## 提示单独设置不同的位置```schema: scope="body"{"label": "提示","type": "button","actionType": "toast","toast": {"items": [{body: '左上方提示', position: 'top-left'},{body: '上方提示', position: 'top-center'},{body: '右上方提示', position: 'top-right'},{body: '中间提示', position: 'center'},{body: '左下方提示', position: 'bottom-left'},{body: '下方提示', position: 'bottom-center'},{body: '右上下方提示', position: 'bottom-right'}]}}
提示单独设置是否展示关闭按钮
```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘展示关闭按钮’, closeButton: true}, {body: ‘不展示关闭按钮’, closeButton: false} ] } }
## 提示单独设置不同的持续时间```schema: scope="body"{"label": "提示","type": "button","actionType": "toast","toast": {"items": [{body: '持续1秒', timeout: 1000},{body: '持续3秒', timeout: 3000}]}}
属性表
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| actionType | string |
"toast" |
指定为 toast 轻提示组件 |
| items | Array<ToastItem> |
[] |
轻提示内容 |
| position | string |
top-center(移动端为center) |
提示显示位置,可用’top-right’、’top-center’、’top-left’、’bottom-center’、’bottom-left’、’bottom-right’、’center’ |
| closeButton | boolean |
false |
是否展示关闭按钮,移动端不展示 |
| showIcon | boolean |
true |
是否展示图标 |
| timeout | number |
5000(error类型为6000,移动端为3000) |
持续时间 |
ToastItem 属性表
| 属性名 | 类型 | 默认值 | 说明 | |
|---|---|---|---|---|
| title | `string \ | SchemaNode` | 标题 | |
| body | `string \ | SchemaNode` | 内容 | |
| level | string |
info |
展示图标,可选’info’、’success’、’error’、’warning’ | |
| position | string |
top-center(移动端为center) |
提示显示位置,可用’top-right’、’top-center’、’top-left’、’bottom-center’、’bottom-left’、’bottom-right’、’center’ | |
| closeButton | boolean |
false |
是否展示关闭按钮 | |
| showIcon | boolean |
true |
是否展示图标 | |
| timeout | number |
5000(error类型为6000,移动端为3000) |
持续时间 |
