<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>


<h2>button</h2>
三种尺寸，圆角直角，实心空心<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>
一个数字的时候是圆形，数字长的时候圆角长方形，类似跑道

<h2>checkbox</h2>
单选，多选，开关，选中不选中。
纯 CSS 实现，不能依赖 JS，原理参考 http://forsigner.com/magic-check/

<h2>tip</h2>
可以控制显示，隐藏
支持设置，自动消失

<h2>loading</h2>
可以控制显示，隐藏

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


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

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

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