【Layui】06 面板 Panel

文檔地址：

https://www.layui.com/doc/element/panel.html

演示案例：

<div class="layui-collapse">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">李清照</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">魯迅</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
</div>

<script>
    //注意：折疊面板 依賴 element 模塊，否則無法進行功能性操作
    layui.use('element', function(){
        let element = layui.element;
    });
</script>

【面板風格】

1、卡片面板 layui-card
2、折疊面板 layui-collapse
3、手風琴面板 layui-collapse lay-accordion

折疊和手風琴的區別在於：

手風琴永遠只展示當前選中的面板，而折疊面板會保留所有選中的

 

【卡片面板】

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用於非白色背景色的主體內<br>
                    從而映襯出邊框投影
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    結合 layui 的柵格系統<br>
                    輕松實現響應式布局
                </div>
            </div>
        </div>
    </div>
</div>

最外層是使用了一個DIV作為一個背景，因為默認網頁背景是白色的，

這樣渲染面板效果不好，看不出來

<div style="padding: 20px; background-color: #F2F2F2;">

第二層使用了一個類似表格的屬性，似乎layui按照表格的方式對我們的面板進行排版

設置了一個行，並且規定列空間為15【划分12等分】

<div class="layui-row layui-col-space15">

隨后就是列屬性

<div class="layui-col-md6">

在列屬性里面才是我們的面板內容：

            <div class="layui-card">
                <div class="layui-card-header">卡片面板</div>
                <div class="layui-card-body">
                    卡片式面板面板通常用於非白色背景色的主體內<br>
                    從而映襯出邊框投影
                </div>
            </div>

 

卡片面板屬性：

用於渲染一個容器元素為面板

layui-card

面板標題頭屬性：

面板的頭部信息，即面板標題

layui-card-header

面板體內容屬性：

展示面板主體內容

layui-card-body

【折疊面板】

即剛開始的演示案例

折疊面板的容器屬性：

<div class="layui-collapse">

折疊面板的選項屬性：

<div class="layui-colla-item">

折疊面板的標題屬性：

<h2 class="layui-colla-title">

折疊面板的內容屬性：

<div class="layui-colla-content layui-show">內容區域</div>

【手風琴面板】

就是在折疊面板的基礎上多設置了這個屬性：

其他都是一樣的

<div class="layui-collapse" lay-accordion>

 

標記默認展開屬性：

設置在標記為面板內容元素中

layui-show

 

【折疊面板的監聽】

文檔地址：

https://www.layui.com/doc/modules/element.html#collapse

 

案例：

<div class="layui-collapse" lay-filter="aaa">
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">杜甫</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">李清照</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
    <div class="layui-colla-item">
        <h2 class="layui-colla-title">魯迅</h2>
        <div class="layui-colla-content layui-show">內容區域</div>
    </div>
</div>

<script>
    //注意：折疊面板 依賴 element 模塊，否則無法進行功能性操作
    layui.use(['element','jquery'], function(){
        let element = layui.element;
        let $ = layui.jquery;

 element.on('collapse(aaa)', function(data){ console.log(data.show); //得到當前面板的展開狀態，true或者false  console.log(data.title); //得到當前點擊面板的標題區域DOM對象  console.log(data.content); //得到當前點擊面板的內容區域DOM對象  });
    });
</script>

 

 

布局 Grid柵格 文檔地址：

https://www.layui.com/demo/grid.html