zent
Version:
一套前端设计语言和基于React的实现
61 lines (42 loc) • 3.11 kB
Markdown
---
title: Loading
subtitle: 加载
path: component/loading
group: 信息反馈
---
## Loading 加载
展示数据无特定时长的载入状态。
### 建议
- 在对于无法立即执行且只需要短时处理的操作时使用；
- 在检索或刷新少量数据（如状态）时使用。
### 注意
- 不允许一次触发多个项目或操作的加载，除非在初始页面加载或刷新时。
### API
`Loading` 有 3 种类型：`BlockLoading`, `InlineLoading` 以及 `FullScreenLoading`。
3 种类型共享大部分参数，每种类型可能有独有的参数。
#### 通用的参数
| 参数 | 说明 | 类型 | 是否必填 | 默认值 | 备选值 |
| ------------ | -------------------- | --------- | -------- | ----------- | -------------------------------- |
| loading | 显示控制 | `boolean` | 否 | `false` | `true` |
| delay | 显示延迟时间（毫秒） | number | 否 | `0` | |
| icon | 图标样式 | `string` | 否 | `'circle'` | `'youzan'` |
| iconSize | 图标大小 | `number` | 否 | | |
| iconText | 图标文案 | `string` | 否 | | |
| colorPreset | 预设主题色 | `string` | 否 | `'primary'` | `'grey'` |
| textPosition | 文案相对图标的位置 | `string` | 否 | `'bottom'` | `'top'` \| `'left'` \| `'right'` |
| textSize | 文案字体大小 | `number` | 否 | | |
| className | 自定义额外类名 | `string` | 否 | | |
#### BlockLoading
块级 `Loading`，可以包裹内容，或者给定一个高度。常用于页面区块的加载。
| 参数 | 说明 | 类型 | 是否必填 | 默认值 | 备选值 |
| -------- | ------------------------------------------------------ | ----------- | -------- | ------ | ------ |
| height | 如果包裹了组件，默认表现为组件高度；否则将使用默认高度 | `number` | `160` | | |
| children | 包裹的内容 | `ReactNode` | 否 | | |
#### InlineLoading
内联 `Loading`，不能包裹内容，行内显示。
#### FullScreenLoading
全屏 `Loading`，不能包裹内容，全屏显示。用于页面级的加载。
| 参数 | 说明 | 类型 | 是否必填 | 默认值 | 备选值 |
| -------------- | --------------------------- | -------- | -------- | ------ | ------ |
| zIndex | 蒙层 z-index | `number` | 否 | | |
| showBackground | 是否显示 Loading 底部背景色 | `bool` | 否 | | |