用于页面和区块的加载中状态,合适的加载动效会有效缓解用户的焦虑。
基本使用
用于展示加载中的状态。
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