Panel 面板

使用方法

使用ax-panel表示使用面板。通过追加ax-border类给面板添加边框；通过追加ax-radius类给面板添加圆角；通过追加ax-shadow类给面板添加阴影。ax-panel-header表示面板的抬头，面板的组合方式较多，可参见演示效果。

                            <div class="ax-panel">
                                <div class="ax-panel-header">面板标题</div>
                                <div class="ax-panel-body">面板内容</div>
                            </div>

关于中国(简单结构)

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header">关于中国(简单结构)</div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

基本变化

可以借助Layout弹性布局对面板标题结构做基本的变化，

关于中国(辅助标题)

关于中国

12条未读

关于中国(自适应布局)新

关于中国(带更多)

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">(辅助标题)</span></div></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b></div><span class="ax-badge ax-radius">12条未读</span></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><span class="ax-title">关于中国(自适应布局)</span><span class="ax-badge ax-primary">新</span></div><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-close"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-edit"></i></a><a href="###" class="ax-operate"><i class="ax-iconfont
ax-icon-up"></i></a></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><i class="ax-adorn ax-iconfont ax-icon-star"></i><div class="ax-col"><span class="ax-title">关于中国(带更多)</span><i class="ax-dot"></i></div><a href="###" class="ax-operate">查看更多<i class="ax-iconfont ax-icon-right"></i></a></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

组合tab

面板头部增加tab页签切换。

关于中国

唐朝宋朝元朝

隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。

关于中国

隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。
宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。
元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。

                                <div class="ax-panel ax-border ax-radius ax-tab">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b></div>
                                        <span class="ax-btn-group ax-tab-nav"><a href="###" class="ax-btn ax-xs ax-active">唐朝</a><a href="###" class="ax-btn ax-xs">宋朝</a><a href="###" class="ax-btn ax-xs">元朝</a></span>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <ul class="ax-panel-body ax-article ax-tab-content">
                                        <li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
                                        <li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
                                        <li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
                                    </ul>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-panel ax-border ax-radius ax-tab">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b></div>
                                        <div class="ax-tab-nav ax-menu-tab">
                                            <a href="###" class="ax-item ax-active"><span class="tab_title">唐朝</span></a>
                                            <a href="###" class="ax-item"><span class="tab_title">宋朝</span></a>
                                            <a href="###" class="ax-item"><span class="tab_title">元朝</span></a>
                                        </div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <ul class="ax-panel-body ax-article ax-tab-content">
                                        <li>隋末天下群雄并起，617年唐国公李渊于晋阳起兵，次年称帝建立唐朝，定都长安。唐太宗继位后开创贞观之治，为盛唐奠定基础。唐高宗承贞观遗风开创“永徽之治”，并于657年建东都洛阳。690年，武则天改国号为周，705年神龙革命后，恢复唐国号。唐玄宗即位后缔造全盛的开元盛世，天宝末全国人口达八千万左右。安史之乱后藩镇割据、宦官专权导致国力渐衰；中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年爆发黄巢起义破坏了唐朝统治根基，907年朱温篡唐，唐朝覆亡。</li>
                                        <li>宋朝是中国历史上商品经济、文化教育、科学创新高度繁荣的时代。有人推算，1000年中国GDP总量为265.5亿美元，占世界经济总量的22.7%，人均GDP为450美元，超过当时西欧的400美元。后世虽认为宋朝“积贫积弱” ，但宋朝民间的富庶与社会经济的繁荣实远超过盛唐。</li>
                                        <li>元朝（1271年-1368年），是中国历史上首次由少数民族建立的大一统王朝，统治者为蒙古孛儿只斤氏。定都大都（今北京），传五世十一帝，从1206年成吉思汗建立蒙古政权始为162年，从忽必烈定国号元开始历时98年。元朝退出中原后的北元政权一直持续到1402年。</li>
                                    </ul>
                                </div>

标题指示

通过给ax-panel-header追加ax-bar、ax-bar-bottom或ax-bar-top以实现标题指示效果。结合标题指示制作更多面板标题的布局。

关于中国(带图标按钮)

刷新

关于中国(带小实体按钮)

导入导出EXCEL

关于中国(带Svg图标)

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-bar ax-row"><div class="ax-col"><span class="ax-title">关于中国(带图标按钮)</span></div><a href="###" class="ax-operate"><i class="ax-iconfont ax-icon-refresh"></i> 刷新</a></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-bar-top ax-row"><div class="ax-col"><span class="ax-title">关于中国(带小实体按钮)</span></div><a href="###" class="ax-btn ax-primary ax-xs">导入</a><a href="###" class="ax-btn ax-primary ax-sm">导出EXCEL</a></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-panel ax-shadow ax-radius">
                                    <div class="ax-panel-header ax-bar-bottom ax-row"><div class="ax-col"><span class="ax-title">关于中国(带Svg图标)</span></div>
                                    <a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use  xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

关闭面板 JS

该功能需要写一点简单的Jquery/JS，已经集成到ax.js当中。ax-panel-close是面板关闭按钮，按钮可以使用iconfont图标也可以使用svg矢量图片，结构如下：

                            <div class="ax-panel">
                                <div class="ax-panel-header ax-row">
                                    <div class="ax-col">面板标题</div>
                                    <a class="ax-panel-close"></a>
                                </div>
                                <div class="ax-panel-body">面板内容</div>
                            </div>

关于中国按钮使用iconfont图标

关于中国按钮使用svg图片

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">按钮使用iconfont图标</span></div><a href="###" class="ax-operate ax-panel-close"><i class="ax-iconfont
ax-icon-up"></i></a></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><span class="ax-title">关于中国</span><span class="ax-color-ignore">按钮使用svg图片</span></div>
                                        <a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-close"></use></svg></a><a href="###" class="ax-operate"><svg class="ax-svg"><use xlink:href="#ax-icon-edit"></use></svg></a><a href="###" class="ax-operate ax-panel-close"><svg class="ax-svg"><use xlink:href="#ax-icon-up"></use></svg></a>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                    </div>
                                </div>

嵌套使用

在ax-panel-body中可重复使用ax-panel以实现嵌套。

                         <div class="ax-panel">
                                <div class="ax-panel-header ax-row">
                                    <div class="ax-col">面板标题</div>
                                </div>
                          <div class="ax-panel-body">
                            面板内容
                            <div class="ax-panel">
                                <div class="ax-panel-header ax-row">
                                    <div class="ax-col">面板标题</div>
                                </div>
                                <div class="ax-panel-body">面板内容</div>
                            </div>
                           </div>
                         </div>

关于中国

人口规模

中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b></div></div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body">
                                        <div class="ax-article">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</div>
                                        <div class="ax-panel ax-border ax-radius ax-margin">
                                            <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">人口规模</b></div><a href="###" class="ax-operate ax-panel-close"><i class="ax-iconfont
ax-icon-up"></i></a></div>
                                            <div class="ax-break-line"></div>
                                            <div class="ax-panel-body">
                                                <div class="ax-article">中国疆域辽阔、民族众多，先秦时期的华夏族在中原地区繁衍生息，到了汉代通过文化交融使汉族正式成型，奠定了中国主体民族的基础。后又通过与周边民族的交融，逐步形成统一多民族国家的局面，而人口也不断攀升，宋代中国人口突破一亿，清朝时期人口突破四亿，到2005年中国人口已突破十三亿。</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

与Swiper轮播整合 Plugin

按要求引入swiper的js和css文件，使用js代码调用；将指示小点用ax-bullet-outer标签包裹，装入ax-panel-header中即可。Swiper的更多用法请点击这里。

关于中国swiper轮播

Slide 1

Slide 2

Slide 3

Slide 4

                        <script src="src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
                        <link href="src/plugins/swiper/swiper.min.css" rel="stylesheet" >
                        <script type='text/javascript'>
                            var swiper16 = new Swiper('#swiper16', {pagination: {el: '.outpag03',clickable :true,},});
                        </script>

<style>
    .swiper-container{
        height:300px;
    }
    .swiper-slide{
        width:100%;
        height:100%;
        background-color: #f5f5f5;
    }
</style>

                                <div class="ax-panel ax-border ax-radius">
                                    <div class="ax-panel-header ax-row"><div class="ax-col"><b class="ax-title">关于中国</b><span class="ax-color-ignore">swiper轮播</span></div>
                                        <div class="ax-bullet-outer"><div class="outpag03"></div></div>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <div class="ax-panel-body ax-article">
                                        <div class="swiper-container" id="swiper16">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide ax-align-origin">Slide 1</div>
                                                <div class="swiper-slide ax-align-origin">Slide 2</div>
                                                <div class="swiper-slide ax-align-origin">Slide 3</div>
                                                <div class="swiper-slide ax-align-origin">Slide 4</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>