单选框

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

一般模式基础用法

  • 使用类名为.vus-radio<label>元素,将单选框(radio)控件包裹,radio控件将被隐藏。
  • 使用<i class="icon"></i>代替radio控件。
  • 使用<span class="text"></span>将文本包裹。
  • 注:.vus-radio类使用了兄弟选择符(~),所以<input><i><span>的排序是不可改变的。
<!-- 一般模式基础用法 -->
<label class="vus-radio">
  <input type="radio" checked>
  <i class="icon"></i>
  <span class="text">论语</span>
</label>
<label class="vus-radio">
  <input type="radio">
  <i class="icon"></i>
  <span class="text">孟子</span>
</label>
<label class="vus-radio">
  <input type="radio">
  <i class="icon"></i>
  <span class="text">大学</span>
</label>
<label class="vus-radio">
  <input type="radio">
  <i class="icon"></i>
  <span class="text">中庸</span>
</label>

一般模式多种风格

  • 添加不同的类来展示不同的风格。
  • .check:打勾。
  • .check-o:打勾(轮廓线)。
check 打勾
check-o 打勾(轮廓线)
<!-- check 打勾 -->
<label class="vus-radio check">
  <input type="radio">
  <i class="icon"></i>
  <span class="text">论语</span>
</label>

<!-- check-o 打勾(轮廓线) -->
<label class="vus-radio check-o">
  <input type="radio">
  <i class="icon"></i>
  <span class="text">论语</span>
</label>

按钮模式基础用法

  • 使用类名为.vus-radio-btn<label>元素,将单选框(radio)控件包裹,radio控件将被隐藏。
  • 使用<span class="text"></span>将文本包裹。
  • 注:.vus-radio-btn类使用了兄弟选择符(~),所以<input><span>的排序是不可改变的。
<!-- 按钮模式基础用法 -->
<label class="vus-radio-btn">
  <input type="radio" checked>
  <span class="text">三国演义</span>
</label>
<label class="vus-radio-btn">
  <input type="radio">
  <span class="text">水浒传</span>
</label>
<label class="vus-radio-btn">
  <input type="radio">
  <span class="text">西游记</span>
</label>
<label class="vus-radio-btn">
  <input type="radio">
  <span class="text">红楼梦</span>
</label>

按钮模式多种风格

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

<!-- check 打勾(注意 i 标签放置位置) -->
<label class="vus-radio-btn check">
  <input type="radio">
  <span class="text">
     <i class="icon"></i>
     三国演义
  </span>
</label>

<!-- 混合使用 -->
<label class="vus-radio-btn outline check">
  <input type="radio">
  <span class="text">
     <i class="icon"></i>
     三国演义
  </span>
</label>

尺寸

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

<!-- large(按钮模式) -->
<label class="vus-radio-btn large">
  <input type="radio" checked>
  <span class="text">三国演义</span>
</label>
<!-- large(按钮模式:打勾) -->
<label class="vus-radio-btn large check">
  <input type="radio" checked>
  <span class="text">
     <i class="icon"></i>
     三国演义
  </span>
</label>

<!-- small(按钮模式) -->
<label class="vus-radio-btn small">
  <input type="radio" checked>
  <span class="text">三国演义</span>
</label>
<!-- small(按钮模式:打勾) -->
<label class="vus-radio-btn small check">
  <input type="radio" 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-radio primary">
  <input type="radio" checked>
  <i class="icon"></i>
  <span class="text">首选、主要</span>
</label>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

禁用状态

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

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

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