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' 加载图标的颜色主题,默认为主色