009-面板
1. 一般的面板通常是指一個獨立的容器, 而折疊面板則能有效地節省頁面的可視面積, 非常適合應用于: QA說明、幫助文檔等。
2. 面板依賴加載組件: element。
3. 卡片面板
3.1. 卡片面板使用
| 名稱 | 組合 |
| 卡片面板容器 | class="layui-card" |
| 卡片面板頭部 | class="layui-card-header" |
| 卡片面板內容 | class="layui-card-body" |
3.2. 如果你的網頁采用的是默認的白色背景, 不建議使用卡片面板。
3.3. 實例
<div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主體內<br>從而映襯出邊框投影</div> </div>4. 折疊面板
4.1. 折疊面板使用
| 名稱 | 組合 |
| 折疊面板容器 | class="layui-collapse" |
| 折疊面板項目 | class="layui-colla-item" |
| 折疊面板標題 | class="layui-colla-title" |
| 折疊面板內容 | class="layui-colla-content" |
4.2. 通過對內容元素設置class為layui-show來選擇性初始展開某一個面板, element模塊會自動呈現狀態圖標。
4.3. 在折疊面板的父容器設置屬性lay-accordion來開啟手風琴, 那么在進行折疊操作時, 始終只會展現當前的面板。
4.4. 實例
<h1>折疊面板</h1> <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><h1>開啟手風琴</h1> <div class="layui-collapse" lay-accordion><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">內容區域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">魯迅</h2><div class="layui-colla-content">內容區域</div></div> </div>5. 例子
5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>面板 - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主體內<br>從而映襯出邊框投影</div></div><h1>折疊面板</h1><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><h1>開啟手風琴</h1><div class="layui-collapse" lay-accordion><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">內容區域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">魯迅</h2><div class="layui-colla-content">內容區域</div></div></div><script type="text/javascript">layui.use('element', function(){var element = layui.element;});</script></body> </html>5.2. 效果圖
總結
