<h1>公有样式示例</h1>

<h2>color</h2>
统一色号(css 中使用统一变量)<br>

黑色: $black; <span class="example color black"></span><br>
白色: $white; <span class="example color white"></span><br>
红色: $red; <span class="example color red"></span><br>
绿色: $green; <span class="example color green"></span><br>
灰色: $grey; <span class="example color grey"></span><br>
蓝色: $blue; <span class="example color blue"></span><br>

<h2>icon</h2>
iconfont 新建项目，使用 class 控制图标样式，不要用 unicode<br>

<span class="icon icon-bag"></span>
<span class="icon icon-check"></span>
<span class="icon icon-close"></span>
<span class="icon icon-left"></span>
<span class="icon icon-right"></span>
<span class="icon icon-search"></span>
<span class="icon icon-down"></span>
<span class="icon icon-up"></span>
<span class="icon icon-love"></span>
<span class="icon icon-delete"></span>
<span class="icon icon-sort-asc"></span>
<span class="icon icon-sort-desc"></span>


<h2>button</h2>
三种尺寸，圆角直角，实心空心<br>
设计图尺寸太多，不统一，用的时候自己改一下大小<br>

<button class="button">空心</button>
<button class="button button-solid">实心</button>
<hr>
<button class="button button-round">圆角</button>
<button class="button button-round button-solid">圆角，实心</button>
<hr>
<button class="button button-large">大</button>
<hr>
<button class="button button-small">小</button>
<hr>
<button class="button button-large button-round button-solid">大，圆角，实心</button>

<h2>badge</h2>
<a style="position:relative"><i class="icon icon-bag"></i><span class="badge badge-tr">1</span></a>
<a style="position:relative"><i class="icon icon-bag"></i><span class="badge">99</span></a>
<br>
一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道

<h2>checkbox</h2>
单选，多选，开关，选中不选中。
纯 CSS 实现，不能依赖 JS

<hr>

<div class="checkbox">
    <input type="checkbox" id="check1">
    <label class="checkbox" for="check1">初始状态</label>
</div>
<div class="checkbox">
    <input type="checkbox" id="check2" checked>
    <label class="checkbox" for="check2">选中状态</label>
</div>
<div class="checkbox">
    <input type="checkbox" id="check3" disabled>
    <label class="checkbox" for="check3">disabled状态</label>
</div>
<div class="checkbox">
    <input type="checkbox" id="check4" disabled checked>
    <label class="checkbox" for="check4">disabled选中状态</label>
</div>
<hr>
<div class="radio">
    <input type="radio" id="radio1">
    <label for="radio1">初始状态</label>
</div>
<div class="radio">
    <input type="radio" id="radio2" checked>
    <label for="radio2" >选中状态</label>
</div>
<div class="radio">
    <input type="radio" id="radio3" disabled>
    <label for="radio3">disabled状态</label>
</div>
<div class="radio">
    <input type="radio" id="radio4" disabled checked>
    <label for="radio4">disabled选中状态</label>
</div>
<hr>
<div class="switch">
    <input type="checkbox" id="switch1">
    <label for="switch1"></label>
</div>
<div class="switch">
    <input type="checkbox" id="switch2" checked>
    <label for="switch2"></label>
</div>
<div class="switch">
    <input type="checkbox" id="switch3" disabled>
    <label for="switch3"></label>
</div>
<div class="switch">
    <input type="checkbox" id="switch4" checked disabled>
    <label for="switch4"></label>
</div>
<br>

<h2>tip</h2>
可以控制显示，隐藏
支持设置，自动消失
<br>
<button id="show-tip" class="button button-small" type="button">click 显示tip</button>

<h2>loading</h2>
可以控制显示，隐藏
<p>
  <a href="javascript:void(0);" id="loading">显示</a>
</p>


<h2>modal</h2>
支持 一个按钮，两个按钮，多个按钮
每个按钮支持自定义事件
<p>
  <a href="javascript:void(0);" id="modal-overlay">显示覆盖层</a>
  <a href="javascript:void(0);" id="modal-alert">Alert</a>
  <a href="javascript:void(0);" id="modal-confirm">Confirm</a>
  <a href="javascript:void(0);" id="modal-custom">自定义</a>
</p>


<h2>Vue 示例(大展示，使用新路由)</h2>

<div id="app">
  <app></app>
</div>

<h2>Handlebars 示例</h2>
<div id="hbs-placeholder">
</div>