加载中 Spin

Spin 组件用于页面或组件的加载状态指示，提供多种展示方式和位置选项。

何时使用

• 页面或组件内容需要异步加载时
• 执行耗时操作需要给用户反馈时
• 需要阻止用户在加载过程中进行操作时

示例

基础用法

最简单的 Spin 组件使用方式。

带提示文字

可以添加提示文字来说明加载状态。

无提示文字

可以通过设置空字符串隐藏提示文字。

包裹模式

Spin 组件可以包裹其他内容，在加载时显示遮罩层。

位置选项

Spin 组件支持多种位置选项。

位置演示

可以通过按钮切换不同的位置选项。

自定义图标

可以使用自定义图标替换默认的加载图标。

全屏模式

可以显示全屏的加载状态。

全屏不同位置

全屏模式也支持不同的位置选项。

卡片中使用

在卡片组件中使用 Spin 显示加载状态。

表格加载

在表格中使用 Spin 显示加载状态。

API

Spin Props

参数	说明	类型	默认值
loading	是否显示加载中	boolean	true
icon	自定义图标	ReactNode	-
text	提示文字	string	-
placement	位置	'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'center'
children	子元素	ReactNode	-
className	自定义类名	string	-
fullscreen	是否全屏	boolean	false

Spin Static Methods

方法	说明	参数
Spin.show(options)	显示全屏 Spin	options: Omit<SpinProps, 'loading' | 'children'>
Spin.close()	关闭全屏 Spin	-

注意事项

1. Spin 组件有两种使用方式：
   • 独立使用：直接显示加载状态
   • 包裹使用：包裹其他内容，在加载时显示遮罩层
2. 通过 loading 属性控制是否显示加载状态
3. 通过 placement 属性可以设置加载图标的位置：
   • 'center'：居中（默认）
   • 'top'、'bottom'、'left'、'right'：对应边缘居中
   • 'top-left'、'top-right'、'bottom-left'、'bottom-right'：对应角落
4. 通过 text 属性可以设置提示文字
5. 通过 icon 属性可以自定义加载图标
6. 全屏模式：
   • 使用 Spin.show() 方法显示全屏加载状态
   • 使用 Spin.close() 方法关闭全屏加载状态
   • 全屏模式会阻止页面滚动
7. Spin 组件在显示和隐藏时都有淡入淡出动画效果
8. 在暗色模式下，Spin 组件会自动适配主题颜色