用于页面和区块的加载中状态,合适的加载动效会有效缓解用户的焦虑。
基本使用
用于展示加载中的状态。
html
<iui-spin></iui-spin><iui-spin></iui-spin>尺寸
设置 size 可以得到不同尺寸的加载图标。默认为 16
html
<iui-spin :size="20"></iui-spin><iui-spin :size="20"></iui-spin>添加描述
通过 tip 属性添加描述文案。
html
<iui-spin tip="This may take a while"></iui-spin><iui-spin tip="This may take a while"></iui-spin>为容器上使用
可以给任意内容添加加载中状态。
html
<iui-spin :loading="true" tip="loading">
<view style="width: 100%">
<iui-card title="Card" extra="More" shadow>
<p>Hi</p>
<text> This is a container</text>
</iui-card>
</view>
</iui-spin><iui-spin :loading="true" tip="loading">
<view style="width: 100%">
<iui-card title="Card" extra="More" shadow>
<p>Hi</p>
<text> This is a container</text>
</iui-card>
</view>
</iui-spin>API
<Spin>props<Spin>slots
