Toast 轻提示

基本用法

```schema: scope=”body” [ { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘轻提示内容’} ] } }, { “label”: “提示2”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘轻提示内容2’} ] } }, ]

  1. ## 设置位置
  2. ```schema: scope="body"
  3. {
  4. "label": "提示",
  5. "type": "button",
  6. "actionType": "toast",
  7. "toast": {
  8. "position": "bottom-center",
  9. "items": [
  10. {body: '轻提示内容2'}
  11. ]
  12. }
  13. }

不展示关闭按钮

```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “closeButton”: false, “items”: [ {body: ‘轻提示内容’} ] } }

  1. ## 关闭图标展示
  2. ```schema: scope="body"
  3. {
  4. "label": "提示",
  5. "type": "button",
  6. "actionType": "toast",
  7. "toast": {
  8. "showIcon": false,
  9. "items": [
  10. {body: '轻提示内容'}
  11. ]
  12. }
  13. }

持续时间设置

```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “timeout”: 1000, “items”: [ {body: ‘轻提示内容’} ] } }

  1. ## 带标题的提示
  2. ```schema: scope="body"
  3. {
  4. "label": "提示",
  5. "type": "button",
  6. "actionType": "toast",
  7. "toast": {
  8. "items": [
  9. {title: '标题', body: '轻提示内容'}
  10. ]
  11. }
  12. }

提示单独设置不同的类型

```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘普通消息提示’, level: ‘info’}, {body: ‘成功消息提示’, level: ‘success’}, {body: ‘错误消息提示’, level: ‘error’}, {body: ‘警告消息提示’, level: ‘warning’} ] } }

  1. ## 提示单独设置不同的位置
  2. ```schema: scope="body"
  3. {
  4. "label": "提示",
  5. "type": "button",
  6. "actionType": "toast",
  7. "toast": {
  8. "items": [
  9. {body: '左上方提示', position: 'top-left'},
  10. {body: '上方提示', position: 'top-center'},
  11. {body: '右上方提示', position: 'top-right'},
  12. {body: '中间提示', position: 'center'},
  13. {body: '左下方提示', position: 'bottom-left'},
  14. {body: '下方提示', position: 'bottom-center'},
  15. {body: '右上下方提示', position: 'bottom-right'}
  16. ]
  17. }
  18. }

提示单独设置是否展示关闭按钮

```schema: scope=”body” { “label”: “提示”, “type”: “button”, “actionType”: “toast”, “toast”: { “items”: [ {body: ‘展示关闭按钮’, closeButton: true}, {body: ‘不展示关闭按钮’, closeButton: false} ] } }

  1. ## 提示单独设置不同的持续时间
  2. ```schema: scope="body"
  3. {
  4. "label": "提示",
  5. "type": "button",
  6. "actionType": "toast",
  7. "toast": {
  8. "items": [
  9. {body: '持续1秒', timeout: 1000},
  10. {body: '持续3秒', timeout: 3000}
  11. ]
  12. }
  13. }

属性表

属性名 类型 默认值 说明
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) 持续时间