Moco | imooc's fe component

按钮

标准尺寸的基础按钮

任意常见块级元素或标签在使用通用按钮时，需带有基础类 .moco-btn 或.moco-ico-btn ，只要基础类就可以得到normal类型的按钮，按钮相关的其他颜色、风格（边框类）、大小需再追加相关类名使用。

<div class="moco-btn">通用按钮</div>
<button class="moco-ico-btn"><i class="imv2-cart"></i></button>

不同色值、风格的按钮

在基础按钮类上通过增加不同色值、风格类得到新样式的按钮 .moco-btn-red 、 .moco-btn-blue 、 .moco-btn-green 或.moco-btn-gray-l、.moco-btn-opa 、.moco-btn-line-l

<button class="moco-btn moco-btn-red">red</button>
<button class="moco-btn moco-btn-blue">blue</button>
<button class="moco-btn moco-btn-green">green</button>
<button class="moco-btn moco-btn-gray-l">gray</button>
<button class="moco-btn moco-btn-opa">opa</button>
<button class="moco-btn moco-btn-cyan">cyan</button>
<button class="moco-btn moco-btn-line-l">white</button>

大小

使用 .moco-btn-lg、.moco-btn-sm 或 .moco-btn-xs 或 .moco-ico-btn-lg、.moco-ico-btn-sm 或 .moco-ico-btn-xs 获得不同尺寸的按钮。

<button class="moco-btn moco-btn-red moco-btn-lg">大按钮</button>
<button class="moco-btn">基础按钮</button>
<button class="moco-btn moco-btn-blue moco-btn-sm">小按钮</button>
<button class="moco-btn moco-btn-gray-l moco-btn-xs">超小按钮</button>
<button class="moco-ico-btn moco-btn-red moco-ico-btn-lg"><i class="imv2-delete"></i>大按钮</button>
<button class="moco-ico-btn"><i class="imv2-cart"></i>基础按钮</button>
<button class="moco-ico-btn moco-btn-blue moco-ico-btn-sm"><i class="imv2-edit"></i>小按钮</button>
<button class="moco-ico-btn moco-btn-green moco-ico-btn-xs"><i class="imv2-thumb_up"></i>超小按钮</button>

禁用状态

添加 .disabled类，或者添加disabled属性可以表现禁用状态，其中添加 disabled属性时按钮事件不再触发。推荐点击按钮后使用disabled属性来控制重复点击

<a href="" class="moco-btn moco-btn-red">提交</a>
<a href="" class="moco-btn moco-btn-red" disabled>提交中...</a>
<button class="moco-ico-btn"><i class="imv2-thumb_up"></i>点赞</button>
<button class="moco-ico-btn disabled"><i class="imv2-thumb_up"></i>已点赞</button>

切换按钮

大小

通过.moco-change-smalle-btn 和 .moco-change-big-btn类名来使用不同大小样式的切换按钮

小切换按钮小切换按钮选中
大切换按钮大切换按钮选中

<a href="javascript:void(0);" class="moco-change-smalle-btn">小切换按钮</a>
<a href="javascript:void(0);" class="moco-change-smalle-btn active">小切换按钮选中</a>
<a href="javascript:void(0);" class="moco-change-big-btn">大切换按钮</a>
<a href="javascript:void(0);" class="moco-change-big-btn active">大切换按钮选中</a>

开关按钮

基本实例

通过.moco-switch-btn类名来使用开关按钮样式，根据是否有 .active 来判断是否开启。

<div class="moco-switch-btn" data-setting="0">
    <div class="moco-switch-line"></div>
    <span class="moco-switch-round"></span>
</div>

<div class="moco-switch-btn active" data-setting="1">
    <div class="moco-switch-line"></div>
    <span class="moco-switch-round"></span>
</div>

表单

基本实例

通过.moco-form-group、.moco-control-label、moco-control-input、moco-form-control、moco-control-tip 类名来使用表单组件

<div class="moco-form-group">
    <label for="inputEmail3" class="moco-control-label">Email</label>
    <div class="moco-control-input">
        <input type="email" class="moco-form-control" id="" placeholder="Email">
        <div class="moco-control-tip">代码错误</div>
    </div>
</div>
<div class="moco-form-group">
    <label for="inputEmail3" class="moco-control-label">UserName</label>
    <div class="moco-control-input">
        <input type="email" class="moco-form-control" id="">
        <div class="moco-control-tip"></div>
    </div>
</div>
<div class="moco-form-group">
    <label for="inputEmail3" class="moco-control-label"></label>
    <div class="moco-control-input">
        <a href="" class="moco-btn moco-btn-blue">提交</a>
        <div class="moco-control-tip"></div>
    </div>
</div>