mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
245 lines
9.7 KiB
Markdown
Executable File
245 lines
9.7 KiB
Markdown
Executable File
---
|
||
title: Spinner 加载中
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Spinner
|
||
icon:
|
||
order: 64
|
||
---
|
||
|
||
一般用来做 `loading` 使用。
|
||
|
||
## 基本使用
|
||
|
||
`show` 属性控制 `spinner` 是否渲染。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "spinner",
|
||
"show": true,
|
||
}
|
||
}
|
||
```
|
||
|
||
`size` 属性控制 `spinner` 的大小,有三种配置:`sm`, `lg` 和 空值。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": [
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"size": "sm",
|
||
"className": "mr-4"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"size": "",
|
||
"className": "mr-4"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"size": "lg"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
`className` 属性、 `spinnerClassName`属性和 `spinnerWrapClassName`属性可以配置 spinner 自定义的 class,`className`会添加到 spinner 组件的最外层标签上,`spinnerClassName`会添加到 icon 对应的标签上,`spinnerWrapClassName` 在作为组件容器使用时,会作用于整个 Spinner 组件的最外层元素上。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": [
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"className": "my-spinner",
|
||
"spinnerClassName": "my-spinner-custom-icon",
|
||
"spinnerWrapClassName": "my-spinner-wrap",
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
`icon` 属性可以配置自定义的图标,可以是 `amis` 内置的图标名称(需要是在 icons.tsx 组件中注册过的); 可以是字体图标库的名称(需要引入对应的图标库),比如`fa fa-spinner`; 也可以是网络图片,比如 `/examples/static/logo.png`;
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": [
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"icon": "",
|
||
"className": "mr-4"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"icon": "reload",
|
||
"className": "mr-4"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"icon": "fa fa-spinner",
|
||
"className": "mr-4"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"icon": "/examples/static/logo.png"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
`tip` 属性可以配置 spinner 的文案,同时 `tipPlacement`可以配置 tip 的相对于 icon 的位置,有四种配置:`top`,`right`,`bottom`(默认),`left`;
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": [
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"tip": "加载中...",
|
||
"className": "mr-10"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"tip": "加载中...",
|
||
"tipPlacement": "right",
|
||
"className": "mr-10"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"tip": "加载中...",
|
||
"tipPlacement": "top",
|
||
"className": "mr-10"
|
||
},
|
||
{
|
||
"type": "spinner",
|
||
"show": true,
|
||
"tip": "加载中...",
|
||
"tipPlacement": "left"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
`delay` 属性可以配置 spinner 的延迟显示时间,例如 delay=1000,`show` 属性设为 `true` 后,1000ms 后才会显示出来。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "spinner",
|
||
"show": true,
|
||
"delay": 1000
|
||
}
|
||
}
|
||
```
|
||
|
||
## 作为容器使用
|
||
|
||
`spinner` 组件可以作为容器使用,被包裹的内容可通过 `body` 配置, 且作为容器使用的时候可以使用 `overlay` 属性来配置显示 spinner 的时候是否显示遮罩层(遮罩层背景颜色默认是透明的,可通过外层 className 自定义遮罩层颜色)。
|
||
|
||
```schema
|
||
{
|
||
"type": "page",
|
||
"body": {
|
||
"type": "spinner",
|
||
"show": true,
|
||
"overlay": true,
|
||
"body": {
|
||
"type": "form",
|
||
"body": [
|
||
{
|
||
"type": "input-text",
|
||
"name": "name",
|
||
"label": "姓名:"
|
||
},
|
||
{
|
||
"name": "email",
|
||
"type": "input-email",
|
||
"label": "邮箱:"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## Spinner 在组件树中的默认表现
|
||
|
||
当在一棵树中,父组件和子组件同时在 `loading` 状态时,只有父组件的 `loading` 会生效;父组件的 `loading` 结束后才会根据子组件中的`loading`状态,来决定子组件中的`Spinner`是否需要进入`loading`。
|
||
|
||
```schema
|
||
{
|
||
type: 'service',
|
||
api: '/api/mock2/sample?orderBy=id&orderDir=desc&perPage=10&waitSeconds=5',
|
||
body: {
|
||
type: 'page',
|
||
initApi:
|
||
'/api/mock2/sample?orderBy=id&orderDir=desc&perPage=10&waitSeconds=10',
|
||
}
|
||
}
|
||
```
|
||
|
||
在这个例子中,`service` 会先进入 `loading` ,5 秒后 `page` 组件开始 `loading`
|
||
|
||
## 动态控制组件渲染
|
||
|
||
使用 `showOn` 表达式控制 `spinner` 是否渲染。
|
||
|
||
```schema
|
||
{
|
||
type: 'page',
|
||
body: {
|
||
type: 'form',
|
||
body: [
|
||
{
|
||
type: 'switch',
|
||
name: 'show',
|
||
label: 'show',
|
||
value: true
|
||
},
|
||
{
|
||
type: 'spinner',
|
||
overlay: false,
|
||
showOn: 'this.show'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| -------------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| type | `string` | `spinner` | 指定为 Spinner 渲染器 |
|
||
| show | `boolean` | `true` | 是否显示 spinner 组件 |
|
||
| showOn | [表达式](../../../docs/concepts/expression) | `true` | 是否显示 spinner 组件的条件 |
|
||
| className | `string` | | spinner 图标父级标签的自定义 class |
|
||
| spinnerClassName | `string` | | 组件中 icon 所在标签的自定义 class |
|
||
| spinnerWrapClassName | `string` | | 作为容器使用时组件最外层标签的自定义 class |
|
||
| size | `string` | | 组件大小 `sm` `lg` |
|
||
| icon | `string` | | 组件图标,可以是`amis`内置图标,也可以是字体图标或者网络图片链接,作为 ui 库使用时也可以是自定义组件 |
|
||
| tip | `string` | | 配置组件文案,例如`加载中...` |
|
||
| tipPlacement | `top`, `right`, `bottom`, `left` | `bottom` | 配置组件 `tip` 相对于 `icon` 的位置 |
|
||
| delay | `number` | `0` | 配置组件显示延迟的时间(毫秒) |
|
||
| overlay | `boolean` | `true` | 配置组件显示 spinner 时是否显示遮罩层 |
|
||
| body | [SchemaNode](../../docs/types/schemanode) | | 作为容器使用时,被包裹的内容 |
|
||
| loadingConfig | `{root?: string}` | | 为 `Spinner` 指定挂载的容器, `root` 是一个 selector,在拥有`Spinner`的组件上都可以通过传递`loadingConfig`改变 Spinner 的挂载位置,开启后,会强制开启属性`overlay=true`,并且`icon`会失效 |
|