Icon图标按钮

带Icon图标的操作按钮。

基础用法

图标按钮内置了.icon.text样式,其中.icon代表Icon图标,.text代表文字信息。例如:

<button type="button" class="vus-btn">
   <i class="icon vi-back"></i>
   <span class="text">返回</span>
</button>

<!-- 图标在右侧 -->
<button type="button" class="vus-btn">
   <span class="text">日期</span>
   <i class="icon vi-date-o"></i>
</button>

<!-- 无文字按钮 -->
<button type="button" class="vus-btn">
   <i class="icon vi-zoom"></i>
</button>

<!-- 设置图标大小 -->
<button type="button" class="vus-btn">
   <i class="icon vi-mail-o vus-fs-22"></i>
</button>

<!-- 圆形图标按钮 -->
<button type="button" class="vus-btn circle">
   <i class="icon vi-gear"></i>
</button>

按钮组

使用.vus-btn-group类,将按钮包裹起来组成按钮组。例如:
带文字
无文字
<form class="vus-btn-group">
   <button type="button" class="vus-btn">
      <i class="icon vi-arrow"></i>
      <span class="text">上一页</span>
   </button>
  
   <!-- 图标在右侧 -->
   <button type="button" class="vus-btn">
      <span class="text">下一页</span>
      <i class="icon vi-arrow vus-rotate-180"></i>
   </button>
<form>

<form class="vus-btn-group">
   <!-- 无文字按钮 -->
   <button type="button" class="vus-btn">
      <i class="icon vi-plus"></i>
   </button>
   <button type="button" class="vus-btn">
      <i class="icon vi-edit-o"></i>
   </button>
   <button type="button" class="vus-btn">
      <i class="icon vi-shop-cart-o"></i>
   </button>
   <button type="button" class="vus-btn">
      <i class="icon vi-trash-o"></i>
   </button>
<form>

Loading 按钮

提交数据加载操作,在按钮上显示Loading状态。例如:
<button type="button" class="vus-btn loading">
   <i class="icon vi-spinner vus-anim spin-pulse"></i>
   <span class="text">加载中...</span>
</button>
  
<button type="button" class="vus-btn">
   <i class="icon vi-loading vus-anim spin"></i>
   <span class="text">加载中...</span>
</button>