加载器 - Semi Design Next

代码演示

如何引入

import { Spin } from '@fibrous/semi-ui-solid';

基本用法

A basic spin.

代码

import { Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    return (
        <div style={{ 'margin-left': '30px' }}>
            <div style={{ 'margin-bottom': '10px' }}>A basic spin.</div>
            <Spin />
        </div>
    );
}

尺寸

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

size: small

size: middle

size: large

代码

import { Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    return (
        <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>
    );
}

带文字的

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

I am loading...

Here are some texts.

And more texts on the way.

代码

import { Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    return (
        <div>
            <Spin tip="I am loading...">
                <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>
    );
}

自定义指示符

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

A spin with customized indicator.

代码

import { IconLoading } from '@fibrous/semi-icons-solid';
import { Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    return (
        <div style={{ 'margin-left': '30px' }}>
            <div>A spin with customized indicator.</div>
            <Spin indicator={<IconLoading />} />
        </div>
    );
}

延迟显示

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

代码

import { createSignal } from 'solid-js';
import { Button, Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    const [loading, setLoading] = createSignal(false);

    const toggle = () => {
        setLoading(!loading());
    };

    return (
        <div>
            <Button onClick={toggle} style={{ 'margin-right': '20px' }}>
                延迟显示的spin
            </Button>
            <Spin delay={1000} spinning={loading()} />
        </div>
    );
}

受控

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

代码

import { createSignal } from 'solid-js';
import { Button, Spin } from '@fibrous/semi-ui-solid';

export default function SpinDemo() {
    const [loading, setLoading] = createSignal(false);

    const toggle = () => {
        setLoading(!loading());
    };

    return (
        <div>
            <Button onClick={toggle} style={{ 'margin-right': '20px' }}>
                受控的 Spin
            </Button>
            <Spin spinning={loading()} />
        </div>
    );
}

API 参考

Props

属性	说明	类型	默认值
childStyle	内部子元素的样式，可以是对象（键使用 kebab-case）或字符串。	`JSX.CSSProperties \| string`	-
delay	延迟显示加载效果的时间，单位毫秒。	`number`	`0`
indicator	自定义加载指示符，传入 JSX 元素。	`JSX.Element`	-
size	组件大小。	`SpinSize`	`"middle"`
spinning	是否处于加载中的状态。	`boolean`	`true`
tip	当 Spin 作为包裹元素时，自定义描述文字，传入 JSX 元素。	`JSX.Element`	-
wrapperClassName	包裹元素的类名。	`string`	-

class、style、ref 与原生属性和事件落在根元素 div 上。

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;
}
```