amis/docs/zh-CN/components/toast.md
HongYang 7efecef811
feat:轻提示组件 (#3546)
* fix: calendar长日期放大模式显示问题

* fix: 修改

* feat:轻提示组件

* fix:修复测试用例

* fix:修复测试用例

* fix:修复测试用例

* fix:修复测试用例

* fix: 修改schema

* fix: 清除提示移到render

* feat: 轻提示设置action

* fix: 修复test

* fix: toast参数修改

* fix: 增加容错

Co-authored-by: hongyang03 <hongyang03@baidu.com>
2022-02-17 17:42:40 +08:00

5.1 KiB
Raw Blame History

title description type group menuName icon order
Toast 轻提示 0 ⚙ 组件 Toast 70

基本用法

[
  {
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "items": [
        {body: '轻提示内容'}
      ]
    }
  },
  {
    "label": "提示2",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "items": [
        {body: '轻提示内容2'}
      ]
    }
  },
]

设置位置

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "position": "bottom-center",
      "items": [
        {body: '轻提示内容2'}
      ]
    }
}

不展示关闭按钮

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "closeButton": false,
      "items": [
        {body: '轻提示内容'}
      ]
    }
}

关闭图标展示

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "showIcon": false,
      "items": [
        {body: '轻提示内容'}
      ]
    }
}

持续时间设置

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "timeout": 1000,
      "items": [
        {body: '轻提示内容'}
      ]
    }
}

带标题的提示

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "items": [
        {title: '标题', body: '轻提示内容'}
      ]
    }
}

提示单独设置不同的类型

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "items": [
        {body: '普通消息提示', level: 'info'},
        {body: '成功消息提示', level: 'success'},
        {body: '错误消息提示', level: 'error'},
        {body: '警告消息提示', level: 'warning'}
      ]
    }
}

提示单独设置不同的位置

{
    "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'}
      ]
    }
}

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

{
    "label": "提示",
    "type": "button",
    "actionType": "toast",
    "toast": {
      "items": [
        {body: '展示关闭按钮', closeButton: true},
        {body: '不展示关闭按钮', closeButton: false}
      ]
    }
}

提示单独设置不同的持续时间

{
    "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 5000error类型为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 5000error类型为6000移动端为3000 持续时间