代码演示 ​

如何引入 ​

jsx
import { Spin } from '@kousum/semi-ui-vue';

基本用法 ​

尺寸 ​

组件定义了三种尺寸：大、中（默认）、小。

带文字的 ​

通过 tip 属性可设置当 Spin 用作包裹元素时的文字。

自定义指示符 ​

可以通过设置 indicator 属性自定义 Spin 的指示符样式。

延迟显示 ​

通过 delay 设置延迟显示 loading 的效果
组件是否处于 loading 状态由传入的 spinning 值决定，loading 为受控属性

API 参考 ​

属性说明类型默认值
childStyle内部子元素的样式 v>=1.0.0CSSProperties-
delay延迟显示加载效果的时间number(ms)0
indicator加载指示符ReactNode无
size组件大小，可选值为 small, middle, largestringmiddle
spinning是否处于加载中的状态booleantrue
style内联样式CSSProperties-
tip当 spin 作为包裹元素时，可以自定义描述文字ReactNode无
wrapperClassName包裹元素的类名string无

设计变量 ​

文案规范 ​

  • 准确地说明加载状态，使用比如“Loading”, “Submitting”, “Processing”等词
  • 使用尽量少的词汇去描述状态

FAQ ​

  • 怎么修改 icon 的颜色？

    可以通过给 .semi-spin-wrapper 类添加 color 属性覆盖原有的颜色（推荐以更高权重覆盖）

    <Spin classname='custom' />

.custom .semi-spin-wrapper {
  color: red;
}