Spinner 加载中

一般用来做 loading 使用。

基本使用

show 属性控制 spinner 是否渲染。

{
    "type": "page",
    "body": {
        "type": "spinner",
        "show": true,
    }
}

size 属性控制 spinner 的大小，有三种配置：sm, lg 和 空值。

{
    "type": "page",
    "body": [
        {
            "type": "spinner",
            "show": true,
            "size": "sm",
            "className": "mr-4"
        },
        {
            "type": "spinner",
            "show": true,
            "size": "",
            "className": "mr-4"
        },
        {
            "type": "spinner",
            "show": true,
            "size": "lg"
        }
    ]
}

className 属性、 spinnerClassName属性和 spinnerWrapClassName属性可以配置 spinner 自定义的 class，className会添加到 spinner 组件的最外层标签上，spinnerClassName会添加到 icon 对应的标签上，spinnerWrapClassName 在作为组件容器使用时，会作用于整个 Spinner 组件的最外层元素上。

{
    "type": "page",
    "body": [
        {
            "type": "spinner",
            "show": true,
            "className": "my-spinner",
            "spinnerClassName": "my-spinner-custom-icon",
            "spinnerWrapClassName": "my-spinner-wrap",
        }
    ]
}

icon 属性可以配置自定义的图标，可以是 amis 内置的图标名称（需要是在 icons.tsx 组件中注册过的）; 可以是字体图标库的名称(需要引入对应的图标库)，比如fa fa-spinner; 也可以是网络图片，比如 /examples/static/logo.png;

{
    "type": "page",
    "body": [
        {
            "type": "spinner",
            "show": true,
            "icon": "",
            "className": "mr-4"
        },
        {
            "type": "spinner",
            "show": true,
            "icon": "reload",
            "className": "mr-4"
        },
        {
            "type": "spinner",
            "show": true,
            "icon": "fa fa-spinner",
            "className": "mr-4"
        },
        {
            "type": "spinner",
            "show": true,
            "icon": "/examples/static/logo.png"
        }
    ]
}

tip 属性可以配置 spinner 的文案，同时 tipPlacement可以配置 tip 的相对于 icon 的位置，有四种配置：top,right,bottom(默认),left;

{
    "type": "page",
    "body": [
        {
            "type": "spinner",
            "show": true,
            "tip": "加载中...",
            "className": "mr-10"
        },
        {
            "type": "spinner",
            "show": true,
            "tip": "加载中...",
            "tipPlacement": "right",
            "className": "mr-10"
        },
        {
            "type": "spinner",
            "show": true,
            "tip": "加载中...",
            "tipPlacement": "top",
            "className": "mr-10"
        },
        {
            "type": "spinner",
            "show": true,
            "tip": "加载中...",
            "tipPlacement": "left"
        }
    ]
}

delay 属性可以配置 spinner 的延迟显示时间，例如 delay=1000，show 属性设为 true 后，1000ms 后才会显示出来。

{
    "type": "page",
    "body": {
        "type": "spinner",
        "show": true,
        "delay": 1000
    }
}

作为容器使用

spinner 组件可以作为容器使用，被包裹的内容可通过 body 配置, 且作为容器使用的时候可以使用 overlay 属性来配置显示 spinner 的时候是否显示遮罩层（遮罩层背景颜色默认是透明的，可通过外层 className 自定义遮罩层颜色）。

{
    "type": "page",
    "body": {
        "type": "spinner",
        "show": true,
        "overlay": true,
        "body": {
            "type": "form",
            "body": [
                {
                    "type": "input-text",
                    "name": "name",
                    "label": "姓名："
                },
                {
                    "name": "email",
                    "type": "input-email",
                    "label": "邮箱："
                }
            ]
        }
    }
}

属性表