feat: 完善spinner组件文档

This commit is contained in:
allenve 2023-04-26 16:34:29 +08:00
parent 3ad3a9de27
commit 1f81f9266f

View File

@ -198,20 +198,47 @@ body: {
在这个例子中,`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 组件 |
| 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`会失效 |
| 属性名 | 类型 | 默认值 | 说明 |
| -------------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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`会失效 |