<style>
    .demo-page {
        padding: 10px;
    }

    .demo-page .title {
        padding: 10px 0;
    }

    .demo-page .btn {
        margin-bottom: 10px;
    }


    .demo-page .icon_lists span{
        float: left;
        width: 50px;
        height: 30px;
        text-align: center;
        margin-top: 10px;
    }

    .demo-page .modality {
        color: #219dd6;
    }

    .demo-page .modality span{
        font-size: 20px;
    }

    .demo-page .sort {
        color: #999;
    }

    .demo-page .sort span {
        font-size: 20px;
    }

    .your-div {
        width: 500px;
        height: 200px;
    }
</style>
<div class="demo-page blk-page">
    {{# content}}
        <p class="title">1.复选按钮</p>
        {{#each checkbox}}
            {{> icon/checkbox}}
            <br><br>
        {{/each}}

        <p class="title">2.单选按钮</p>
        {{#each radio}}
            {{> icon/radio}}
            <br><br>
        {{/each}}

        <p class="title">2.1 选中状态切换</p>


        {{#each genders}}
        <div class="input-radio" data-value="{{value}}">
            {{> icon/radio}}
            <label>{{name}}</label>
        </div>
        {{/each}}

        {{#each genders}}
        <div class="input-checkbox" data-value="{{value}}">
            {{> icon/checkbox}}
            <label>{{name}}</label>
        </div>
        {{/each}}

        <div class="check-msg"></div>

        <p class="title">3. 按钮</p>
        <span class="btn">普通按钮</span>
        <span class="btn disable">不可点按钮</span>
        <span class="btn red">红色按钮</span>
        <span class="btn white">白色按钮</span>

        <p class="title">4. 提示文字或者某些链接文字颜色</p>
        <span class="blue">提示文字</span>
        <a class="blue">Link text</a>

        <p class="title">5. input</p>
        <input class="input" type="text">

        <p class="bold title">6.文字加粗</p>

        <p class="title">7. 浮动和clearfix</p>
        <div class="clearfix" style="width: 300px;border: 1px solid #000;">
            <p class="left">左浮动</p>
            <p class="right">右浮动</p>
        </div>

        <p class="title">8. 显示和隐藏</p>
        <div style="border: 1px solid #000;">
            <p><span class="hide">我是存在的</span>(左边有个家伙消失啦)</p>
            <p><span class="block">我是block</span></p>
            <p><span class="inline-block" style="height: 30px;border:1px solid #f00;">我是inline-block，我原本是inline元素，现在可以设置高度了</span></p>
            <p><span class="vhide">我是存在的</span>(左边有个家伙隐身了)</p>
        </div>

        <p class="title">9. 分页组件</p>
        <div style="border: 1px solid #000; height: 200px; padding: 5px;">
           {{{ pagination paginationOpts }}}
        </div>

        <p class="title">10. 商品信息</p>
        {{# goods}}
            {{> goods}}
        {{/ goods}}

        <p class="title">11. 面包屑</p>
        {{# navPath}}
            {{> path-nav}}
        {{/ navPath}}

        <p class="title">12. 楼层</p>
        {{# floor}}
           {{> floor}}
        {{/ floor}}

        <p class="title">13. 各类图标</p>
        <div style="border: 1px solid #000;overflow: hidden;">
            <ul class="icon_lists clear">
                <div class="modality">
                    {{> icon/truck}}
                    {{# hook}}
                        {{> icon/round-hook}}
                    {{/ hook}}
                    {{> icon/error-round}}
                    {{> icon/doubt}}
                    {{# warn}}
                        {{> icon/warn}}
                    {{/ warn}}
                </div>

                <div class="sort">
                    {{> icon/clock}}
                    {{> icon/praise}}
                    {{> icon/delete}}
                    {{> icon/up}}
                    {{> icon/down}}
                    {{> icon/solid-round}}
                    {{> icon/collection}}
                    {{> icon/bookmarks}}
                    {{> icon/refresh}}
                    {{> icon/headset}}
                </div>
            </ul>
        </div>


        <p style="margin-top: 20px;">14. 区域/选择地址组件</p>
        <div style="padding: 5px; height: 300px;">
           <p>使用手册详见yohoblk/public/js/plugins/README.md</p>
           <div id="address"></div>
        </div>

        <p class="title">14. tips</p>
        <div>
            <button id="change" >show or hide tip</button>
        </div>
        <div id="tips" style="width: 200px;">
            <input style="width: 100%;" type="text" name="" id="">
        </div>

        <p class="title">15. 头像</p>

        <div>
            <img class="avatar" src="http://devlup.com/wp-content/uploads/2013/07/images.jpg" alt="Braden Hamm">
        </div>


        <p class="title">16. 对话框（弹窗）</p>
        <span class="btn alert-btn">alert</span>
        <span class="btn red confirm-btn">confirm</span>
        <span class="btn white dialog-btn">dialog</span>

        <p class="title">17. 分享</p>
        {{> share}}


        <p class="title">18. 个性化滚动条</p>

        <div class="your-div nano">
            <div class="nano-content">
                <pre>
                // html 添加样式 .nano   .nano-content
                &lt;div class="your-div nano">
                    &lt;div class="nano-content">
                        your content...
                    &lt;/div>
                &lt;/div>


                // js

                    require('yoho-jquery-nanoscroller');
                    $('.nano').nanoScroller();
                </pre>
            </div>
        </div>
        {{/ content}}
    </div>

</div>