amis/docs/zh-CN/components/toast.md

226 lines
7.1 KiB
Markdown
Raw Normal View History

---
title: Toast 轻提示
description:
type: 0
group: ⚙ 组件
menuName: Toast
icon:
order: 70
---
## 基本用法
```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}
]
}
}
```
## 渲染 html
```schema: scope="body"
{
"label": "提示",
"type": "button",
"actionType": "toast",
"toast": {
"items": [
{body: '<strong>Hello</strong> <span>world</span>'},
]
}
}
```
## 属性表
| 属性名 | 类型 | 默认值 | 说明 |
| ----------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| 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` | 持续时间 |
| allowHtml | `boolean` | `true` | 是否会被当作 HTML 片段处理 |