加载器 - Semi Design Next

代码演示

如何引入

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

基本用法

A basic spin.

代码

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="margin-left: 30px">
        <div style="margin-bottom: 10px">A basic spin.</div>
        <Spin />
    </div>
</template>

尺寸

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

size: small

size: middle

size: large

代码

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="margin-left: 30px">
        <div style="margin-bottom: 5px">size: small</div>
        <Spin size="small" />
        <br />
        <br />
        <div style="margin-bottom: 10px">size: middle</div>
        <Spin size="middle" />
        <br />
        <br />
        <div style="margin-bottom: 15px">size: large</div>
        <Spin size="large" />
    </div>
</template>

带文字的

通过 #tip 插槽可设置当 Spin 用作包裹元素时的文字，被包裹的内容放在默认插槽。

I am loading...

Here are some texts.

And more texts on the way.

代码

<script setup lang="ts">
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Spin>
            <template #tip>I am loading...</template>
            <div style="border: 1px solid var(--semi-color-primary); border-radius: 4px; padding-left: 8px">
                <p>Here are some texts.</p>
                <p>And more texts on the way.</p>
            </div>
        </Spin>
    </div>
</template>

自定义指示符

可以通过 #indicator 插槽自定义 Spin 的指示符样式。

A spin with customized indicator.

代码

<script setup lang="ts">
    import { IconLoading } from '@fibrous/semi-icons-vue';
    import { Spin } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div style="margin-left: 30px">
        <div>A spin with customized indicator.</div>
        <Spin>
            <template #indicator>
                <IconLoading />
            </template>
        </Spin>
    </div>
</template>

延迟显示

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

代码

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Spin } from '@fibrous/semi-ui-vue';

    const loading = ref(false);
</script>

<template>
    <div>
        <Button style="margin-right: 20px" @click="loading = !loading">延迟显示的spin</Button>
        <Spin :delay="1000" :spinning="loading" />
    </div>
</template>

受控

通过 spinning 控制组件是否处于 loading 状态

代码

<script setup lang="ts">
    import { ref } from 'vue';
    import { Button, Spin } from '@fibrous/semi-ui-vue';

    const loading = ref(false);
</script>

<template>
    <div>
        <Button style="margin-right: 20px" @click="loading = !loading">受控的 Spin</Button>
        <Spin :spinning="loading" />
    </div>
</template>

API 参考

Props

属性	说明	类型	默认值
size	组件大小。	`SpinSize`	`semiDefault("Spin", "size", "middle")`
spinning	是否处于加载中的状态。	`boolean`	`semiDefault("Spin", "spinning", true)`
delay	延迟显示加载效果的时间，单位毫秒。	`number`	`semiDefault("Spin", "delay", 0)`
wrapperClassName	包裹元素的类名。	`string`	`semiGlobalDefault("Spin", "wrapperClassName")`
childStyle	内部子元素的样式。	`CSSProperties`	`semiGlobalDefault("Spin", "childStyle")`

Events

事件	说明	回调参数
无

Slots

插槽	说明	作用域参数
default	被包裹的内容；有默认插槽时 Spin 作为包裹元素，加载期间带 aria-busy，且内容不可聚焦、不可操作（inert）。	`any`
indicator	自定义加载指示符。	`any`
tip	当 Spin 作为包裹元素时，自定义描述文字。	`any`

Exposes

名称	说明	类型
无

class、style 与原生属性经 attrs 落在根元素上。

Spin 作为包裹元素且处于加载中时，被包裹的内容带 inert，不能聚焦和操作，根元素带 aria-busy。焦点原在被包裹内容里时会先移到 Spin 根元素，加载结束后回到原来的元素。

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$animation_duration-spin_wrapper-spin	600ms	加载图标容器旋转一周时长
$animation_duration-spin_customChildren-spin	1600ms	自定义指示器时旋转一周时长
$color-spin-bg	var(--semi-color-primary)	加载图标背景颜色
$width-spin_large	32px	加载图标尺寸 - 大
$width-spin_middle	20px	加载图标尺寸 - 中
$width-spin_small	14px	加载图标尺寸 - 小
$opacity-spin_children	0.5	加载图标透明度

文案规范

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

FAQ

怎么修改 icon 的颜色？

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