代码演示

如何引入

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

基本用法

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

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

2

​

3

export default () => (

4

    <div style={{ marginLeft: '30px' }}>

5

        <div style={{ marginBottom: '10px' }}>A basic spin.</div>

6

        <Spin />

7

    </div>

8

);

Show Error

Auto Save

尺寸

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

16

 

1

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

2

​

3

export default () => (

4

    <div style={{ marginLeft: '30px' }}>

5

        <div style={{ marginBottom: '5px' }}>size: small</div>

6

        <Spin size="small" />

7

        <br />

8

        <br />

9

        <div style={{ marginBottom: '10px' }}>size: middle</div>

10

        <Spin size="middle" />

11

        <br />

12

        <br />

13

        <div style={{ marginBottom: '15px' }}>size: large</div>

14

        <Spin size="large" />

15

    </div>

16

);

Show Error

Auto Save

带文字的

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

18

 

1

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

2

​

3

export default () => (

4

    <div>

5

        <Spin tip="I am loading...">

6

            <div

7

                style={{

8

                    border: '1px solid var(--semi-color-primary)',

9

                    borderRadius: '4px',

10

                    paddingLeft: '8px',

11

                }}

12

            >

13

                <p>Here are some texts.</p>

14

                <p>And more texts on the way.</p>

15

            </div>

16

        </Spin>

17

    </div>

18

);

Show Error

Auto Save

自定义指示符

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

 

1

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

2

import { IconLoading } from '@kousum/semi-icons-vue';

3

​

4

export default () => (

5

    <div style={{ marginLeft: '30px' }}>

6

        <div>A spin with customized indicator.</div>

7

        <Spin indicator={<IconLoading />} />

8

    </div>

9

);

Show Error

Auto Save

延迟显示

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

0px x 0px

demoApp.vue

demo.tsx

tsconfig.json

Import Map

xxxxxxxxxx

11

7

19

 

1

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

2

import { defineComponent, ref } from 'vue';

3

​

4

const Demo = defineComponent(() => {

5

  const loading = ref(false);

6

​

7

  const toggle = () => {

8

    loading.value = (!loading.value);

9

  };

10

  return ()=>(

11

    <div>

12

      <Button onClick={toggle} style={{ marginRight: '20px' }}>

13

        延迟显示的spin

14

      </Button>

15

      <Spin delay={1000} spinning={loading.value}></Spin>

16

    </div>

17

  );

18

})

19

export default Demo;

Show Error

Auto Save

API 参考

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

设计变量

color

width

other

animation

变量	默认值	用法
$color-spin-bg	var(--semi-color-primary)	加载图标背景颜色

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$width-spin_large	32px	加载图标尺寸 - 大
$width-spin_middle	20px	加载图标尺寸 - 中
$width-spin_small	14px	加载图标尺寸 - 小

显示第 1 条-第 3 条，共 3 条

• 1

变量	默认值	用法
$opacity-spin_children	0.5	加载图标透明度

显示第 1 条-第 1 条，共 1 条

• 1

变量	默认值	用法
$animation_duration-spin_wrapper-spin	600ms	加载图标容器旋转一周时长
$animation_duration-spin_customChildren-spin	1600ms	自定义指示器时旋转一周时长

显示第 1 条-第 2 条，共 2 条

• 1

文案规范

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

FAQ

• 怎么修改 icon 的颜色？

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

  <Spin classname='custom' />
  
  .custom .semi-spin-wrapper {
    color: red;
  }