layui框架学习（5：面板）

  Layui中的菜单样式与面板结合比较紧密，在学习菜单之前，先熟悉Layui的面板样式。Layui的面板主要作为容器使用，其样式主要分为常规面板、卡片面板、折叠面板（含手风琴效果），Layui官网示例中还介绍了面板嵌套，本文后续一一介绍并验证。虽然Layui官网的教程和示例均以div和h元素为主演示面板样式，但在GitHub的layui.css文件中关于面板的预设类并没有特定元素限制。面板样式涉及折叠、手风琴等操作，需要预先加载element模块。
  在div元素的class属性中增加预设类layui-panel即变为普通面板样式，其宽度默认为父容器宽度，可以通过width、height等属性调整面板尺寸。其示例代码及效果截图如下所示：

<div class="layui-panel layui-bg-green" style="width:400px">
      <div style="padding: 30px;">普通面板示例</div>
</div> 

  卡片面板的预设类为layui-card，其内部可分为两部分内容：标题和内容，对应的预设类为layui-card-header和layui-card-body，这两部分内容并不是必须同时存在，可以只包含标题或内容，其余感觉和普通面板没什么区别。其示例代码及效果截图如下所示：

<div class="layui-card layui-bg-blue" style="width:400px">
	<div class="layui-card-header layui-bg-cyan" style="margin: 10px;">面板标题</div>
    <div class="layui-card-body layui-bg-orange" style="margin: 10px;">主体内容</div>
</div> 
<div class="layui-card layui-bg-blue" style="width:400px">			
    <div class="layui-card-header layui-bg-cyan" style="margin: 10px;">面板标题</div>
</div> 
<div class="layui-card layui-bg-blue" style="width:400px">
    <div class="layui-card-body layui-bg-orange" style="margin: 10px;">主体内容</div>
</div> 

  折叠面板的最顶层容器的预设类为layui-collapse，其内部包含一系列的面板项（预设类layui-colla-item），每个面板项与卡片面板类似，包含标题和内容，但预设类名称不同，为layui-colla-title和layui-colla-content，也即折叠面板包含三级：容器->面板项->标题和内容。面板项的内容默认隐藏，可以在内容div的class中添加预设类layui-show，这样显示时会显示内容。标题和内容的话，可以没有内容，这样只能看到标题，点击标题展不开内容，但如果只有内容没有标题的话，除非默认内容展开，否则看不到该面板项。其示例代码及效果截图如下所示：

<div class="layui-collapse" style="width:400px">
  <div class="layui-colla-item ">
    <h2 class="layui-colla-title">早发白帝城</h2>
    <div class="layui-colla-content  layui-show">
      朝辞白帝彩云间，千里江陵一日还。<br />		      
      两岸猿声啼不尽，轻舟已过万重山。
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">赠汪伦</h2>
    <div class="layui-colla-content">
      李白乘舟将欲行，忽闻岸上踏歌声。<br />	
      桃花潭水深千尺，不及汪伦送我情。
    </div>
  </div>
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">望庐山瀑布</h2>
    <div class="layui-colla-content  layui-show">
      日照香炉生紫烟，遥看瀑布挂前川。<br />	
      飞流直下三千尺，疑是银河落九天。
    </div>
  </div>
</div>

  手风琴折叠为折叠面板的特殊效果，未启用手风琴效果时，折叠面板的多个面板项可以同时显示内容，启用手风琴效果后，同一时刻只能有一个面板项显示内容。在折叠面板顶层容器的元素中添加lay-accordion属性即可启用手风琴折叠效果。

  Layui官网的面板示例最后还以折叠面板为例介绍了面板嵌套，就是在面板项的内容部分又套了一个完整的折叠面板，可以无限嵌套，大致结构如下所示，其效果如下图所示：

<div class="layui-collapse" style="width:400px" lay-accordion>
 <div class="layui-colla-item ">
   <h2 class="layui-colla-title">唐诗</h2>
   <div class="layui-colla-content  layui-show">
     <div class="layui-collapse">
       <div class="layui-colla-item ">
         <h2 class="layui-colla-title">早发白帝城</h2>
         <div class="layui-colla-content  layui-show">
           朝辞白帝彩云间，千里江陵一日还。<br />		      
           两岸猿声啼不尽，轻舟已过万重山。
         </div>
       </div>
       <div class="layui-colla-item">
         <h2 class="layui-colla-title">赠汪伦</h2>
         <div class="layui-colla-content">
           李白乘舟将欲行，忽闻岸上踏歌声。<br />	
           桃花潭水深千尺，不及汪伦送我情。
         </div>
       </div>
       <div class="layui-colla-item">
         <h2 class="layui-colla-title">望庐山瀑布</h2>
         <div class="layui-colla-content">
           日照香炉生紫烟，遥看瀑布挂前川。<br />	
           飞流直下三千尺，疑是银河落九天。
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="layui-colla-item">
   <h2 class="layui-colla-title">宋词</h2>
   <div class="layui-colla-content">
     
   </div>
 </div>
 <div class="layui-colla-item">
   <h2 class="layui-colla-title">元曲</h2>
   <div class="layui-colla-content">
     
   </div>
 </div>
</div>

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/