Spin加载器组件
AX-SPIN是静态的缓冲器,表示数据或资源正在加载,指示用户保持等待;本缓冲器支持多主体颜色和暗黑反色。
前言
“spinner旋转器”比“loader加载器”或“buffer缓冲”意义更简单明了,不管是模块加载,内容缓冲,网络等待等等都需要spinner。本框架使用自定义标签ax-spin
表示加载图标。
加载图标的高宽为28px
,可根据需要修改其高宽。
- 输出
- HTML
颜色主题
通过theme
属性修改加载图标的主题颜色,可使用的主题色有:prim(默认),error,succ,info,warn,issue,text,brief和ignore。
- 输出
- HTML
尺寸
通过size
属性设置尺寸:
- sm:小尺寸,14px
- md:中尺寸,28px,默认
- lg:大尺寸,48px
- 输出
- HTML
暗黑反白
如果元素背景本身已经是深色,此时需要使用dark
属性或theme="dark"
,让加载图标反白。
- 输出
- HTML
适用自定义按钮
缓冲器可当做自定义按钮的label
插入自定义按钮当中。
- 输出
- HTML
适用域原生按钮
缓冲器可作为普通html插入任意节点当中,包括原生button
节点。
因为原生按钮的主题色是确定的,所以不需要给缓冲器添加theme
属性或dark
属性。
- 输出
- HTML
Attributes属性
ax-spin为自定义标签,其包含的属性如下:
名称 | 可选值 | 默认值 | 说明 |
---|---|---|---|
dark | '' | - | 启用暗黑反白,默认不启用 |
size | 'sm'/'md'/'lg' | 'md' | 尺寸,sm=14px,md=28px,lg=38px |
theme | prim/error/succ/info/warn/issue/text/brief/ignore | 'prim' | 加载图标的颜色主题,默认为主色 |