滑动开关

  • 使用类名为.vus-switch<label>元素,将复选框(checkbox)控件包裹,checkbox控件将被隐藏。
  • 使用<i class="icon"></i>代替checkbox控件。
  • 使用<span class="text"></span>将文本包裹。
  • 注:.vus-switch类使用了兄弟选择符(~),所以<input><i><span>的排序是不可改变的。

基础用法

<!-- 基础用法 -->
<label class="vus-switch">
  <input type="checkbox" checked>
  <i class="icon"></i>
</label>

<!-- 基础用法(文字描述) -->
<label class="vus-switch">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text">开关</span>
</label>

动态文字

<span class="text"></span>标签里添加v--on=""v--off=""属性,可设置动态文字。

<!-- 添加v--on和v--off属性 -->
<label class="vus-switch">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<label class="vus-switch">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text" v--on="打开" v--off="关闭"></span>
</label>

<label class="vus-switch">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text" v--on="ON" v--off="OFF"></span>
</label>

文字在内部

添加.innertext类,设置文字在内部显示。(注:必需使用动态文字v--on=""v--off=""属性方法。且最好是一个中文和不超过3个字母。)

<!-- 文字在内部(必需在span标签添加v--on和v--off属性) -->
<label class="vus-switch innertext">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<label class="vus-switch innertext">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text" v--on="开" v--off="关"></span>
</label>

<label class="vus-switch innertext">
  <input type="checkbox">
  <i class="icon"></i>
  <span class="text" v--on="ON" v--off="OFF"></span>
</label>

尺寸

添加.large类,设置为大型滑动开关。

<label class="vus-switch large">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<label class="vus-switch large innertext">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="开" v--off="关"></span>
</label>

颜色

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

<!-- success -->
<label class="vus-switch success">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- warning -->
<label class="vus-switch warning">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- danger -->
<label class="vus-switch danger">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- info -->
<label class="vus-switch info">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- dark -->
<label class="vus-switch dark">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- light -->
<label class="vus-switch light">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- white -->
<label class="vus-switch white">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

<!-- 默认底色 -->
<label class="vus-switch primary default">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>
<label class="vus-switch success default">
  <input type="checkbox" checked>
  <i class="icon"></i>
  <span class="text" v--on="是" v--off="否"></span>
</label>

禁用状态

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

<label class="vus-switch">
  <input type="checkbox" checked disabled>
  <i class="icon"></i>
  <span class="text">开关</span>
</label>