多选框

  • 多选框设置了两种模式:
    1. .vus-checkbox:一般模式。
    2. .vus-checkbox-btn:按钮模式。

一般模式基础用法

  • 使用类名为.vus-checkbox<label>元素,将多选框(checkbox)控件包裹,checkbox控件将被隐藏。
  • 使用<i class="icon"></i>代替checkbox控件。
  • 使用<span class="text"></span>将文本包裹。
  • 注:.vus-checkbox类使用了兄弟选择符(~),所以<input><i><span>的排序是不可改变的。
<!-- 一般模式基础用法 -->
<label class="vus-checkbox">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">尚书</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">礼记</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">周易</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">春秋左氏传</span>
</label>
<label class="vus-checkbox">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">诗经</span>
</label>

一般模式多种风格

  • 添加不同的类来展示不同的风格。
  • .fill:填充。
  • .square:方块。
fill 填充
square 方块
<!-- fill 填充 -->
<label class="vus-checkbox fill">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">尚书</span>
</label>

<!-- square 方块 -->
<label class="vus-checkbox square">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">尚书</span>
</label>

按钮模式基础用法

  • 使用类名为.vus-checkbox-btn<label>元素,将多选框(checkbox)控件包裹,checkbox控件将被隐藏。
  • 使用<span class="text"></span>将文本包裹。
  • 注:.vus-checkbox-btn类使用了兄弟选择符(~),所以<input><span>的排序是不可改变的。
<!-- 按钮模式基础用法 -->
<label class="vus-checkbox-btn">
  <input type="checkbox" checked>
  <span class="text">孝经</span>
</label>
<label class="vus-checkbox-btn">
  <input type="checkbox">
  <span class="text">弟子规</span>
</label>
<label class="vus-checkbox-btn">
  <input type="checkbox">
  <span class="text">三字经</span>
</label>
<label class="vus-checkbox-btn">
  <input type="checkbox">
  <span class="text">百家姓</span>
</label>

按钮模式多种风格

  • 添加不同的类来展示不同的多选效果。
  • .outline:轮廓线。
  • .check:打勾。(注:打勾模式需要把<i class="icon"></i>放置<span class="text"></span>内部,且文字前面。)
轮廓线
check 打勾
混合使用
<!-- 轮廓线 -->
<label class="vus-checkbox-btn outline">
  <input type="checkbox">
  <span class="text">孝经</span>
</label>

<!-- check 打勾(注意 i 标签放置位置) -->
<label class="vus-checkbox-btn check">
  <input type="checkbox">
  <span class="text">
     <i class="icon"></i>
     孝经
  </span>
</label>

<!-- 混合使用 -->
<label class="vus-checkbox-btn outline check">
  <input type="checkbox">
  <span class="text">
     <i class="icon"></i>
     孝经
  </span>
</label>

尺寸

  • 添加指定类设置不同尺寸的多选框。
  • .small:小型多选框(只支持按钮模式)。
  • .large:大型多选框。
large(一般模式)
large(按钮模式)
small(按钮模式)
<!-- large(一般模式) -->
<label class="vus-checkbox large">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">尚书</span>
</label>

<!-- large(按钮模式) -->
<label class="vus-checkbox-btn large">
  <input type="checkbox" checked>
  <span class="text">孝经</span>
</label>
<!-- large(按钮模式:打勾) -->
<label class="vus-checkbox-btn large check">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     孝经
  </span>
</label>

<!-- small(按钮模式) -->
<label class="vus-checkbox-btn small">
  <input type="checkbox" checked>
  <span class="text">孝经</span>
</label>
<!-- small(按钮模式:打勾) -->
<label class="vus-checkbox-btn small check">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     孝经
  </span>
</label>

颜色

  • 添加下列类可以设置不同颜色的多选框。
  • .primary:首选、主要。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、错误。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
  • .white:白色。
  • .default:默认边框。
Primary(首选、主要)
一般模式
按钮模式
按钮模式(默认边框)
Success(成功)
一般模式
按钮模式
按钮模式(默认边框)
Warning(警告)
一般模式
按钮模式
按钮模式(默认边框)
Danger(危险、错误)
一般模式
按钮模式
按钮模式(默认边框)
Info(信息)
一般模式
按钮模式
按钮模式(默认边框)
Dark(暗黑)
一般模式
按钮模式
按钮模式(默认边框)
Light(亮灰)
一般模式
按钮模式
按钮模式(默认边框)
White(白色)
一般模式
按钮模式
按钮模式(默认边框)
<!-- 一般模式 -->
<label class="vus-checkbox primary">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">首选、主要</span>
</label>

<label class="vus-checkbox success">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">成功</span>
</label>

<label class="vus-checkbox warning">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">警告</span>
</label>

<label class="vus-checkbox danger">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">危险</span>
</label>

<label class="vus-checkbox info">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">信息</span>
</label>

<label class="vus-checkbox dark">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">暗黑</span>
</label>

<label class="vus-checkbox light">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">亮灰</span>
</label>

<label class="vus-checkbox white">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text">白色</span>
</label>

<!-- 一般模式(默认边框) -->
<label class="vus-checkbox primary default">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">首选、主要</span>
</label>
<label class="vus-checkbox success default">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">成功</span>
</label>
...

<!-- 按钮模式 -->
<label class="vus-checkbox-btn primary">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     首选、主要
  </span>
</label>

<label class="vus-checkbox-btn success">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     成功
  </span>
</label>

<label class="vus-checkbox-btn warning">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     警告
  </span>
</label>

<label class="vus-checkbox-btn danger">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     危险
  </span>
</label>

<label class="vus-checkbox-btn info">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     信息
  </span>
</label>

<label class="vus-checkbox-btn dark">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     暗黑
  </span>
</label>

<label class="vus-checkbox-btn light">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     亮灰
  </span>
</label>

<label class="vus-checkbox-btn white">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     白色
  </span>
</label>

<!-- 按钮模式(默认边框) -->
<label class="vus-checkbox-btn primary default">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     首选、主要
  </span>
</label>
<label class="vus-checkbox-btn success default">
  <input type="checkbox" checked>
  <span class="text">
     <i class="icon"></i>
     成功
  </span>
</label>
...

禁用状态

添加disabled属性,设置多选框为不可用状态。

<!-- disabled(一般模式) -->
<label class="vus-checkbox">
  <input type="checkbox" checked disabled>
  <i class="icon"></i>
  <span class="text">论语</span>
</label>

<!-- disabled(按钮模式) -->
<label class="vus-checkbox-btn">
  <input type="checkbox" checked disabled>
  <span class="text">
     <i class="icon"></i>
     三国演义
  </span>
</label>