面板 - 頁面元素

                    一般的面板通常是指一個獨立的容器,而折疊面板則能有效地節省頁面的可視面積,非常適合應用于:QA說明、幫助文檔等
                    依賴加載組件:element
                    卡片面板
                    卡片式面板面板通常用于非白色背景色的主體內
                    從而映襯出邊框投影
                    卡片面板
                    結合 layui 的柵格系統
                    輕松實現響應式布局
                    <div class="layui-card">
                      <div class="layui-card-header">卡片面板</div>
                      <div class="layui-card-body">
                        卡片式面板面板通常用于非白色背景色的主體內<br>
                        從而映襯出邊框投影
                      </div>
                    </div>
                        

                    如果你的網頁采用的是默認的白色背景,不建議使用卡片面板。

                    杜甫

                    杜甫的思想核心是儒家的仁政思想,他有“致君堯舜上,再使風俗淳”的宏偉抱負。杜甫雖然在世時名聲并不顯赫,但后來聲名遠播,對中國文學和日本文學都產生了深遠的影響。杜甫共有約1500首詩歌被保留了下來,大多集于《杜工部集》。

                    李清照

                    李清照出生于書香門第,早期生活優裕,其父李格非藏書甚富,她小時候就在良好的家庭環境中打下文學基礎。出嫁后與夫趙明誠共同致力于書畫金石的搜集整理。金兵入據中原時,流寓南方,境遇孤苦。所作詞,前期多寫其悠閑生活,后期多悲嘆身世,情調感傷。形式上善用白描手法,自辟途徑,語言清麗。

                    魯迅

                    魯迅一生在文學創作、文學批評、思想研究、文學史研究、翻譯、美術理論引進、基礎科學介紹和古籍校勘與研究等多個領域具有重大貢獻。他對于五四運動以后的中國社會思想文化發展具有重大影響,蜚聲世界文壇,尤其在韓國、日本思想文化領域有極其重要的地位和影響,被譽為“二十世紀東亞文化地圖上占最大領土的作家”。

                    通過對內容元素設置class為 layui-show 來選擇性初始展開某一個面板,element 模塊會自動呈現狀態圖標。

                    <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(){
                      var element = layui.element;
                      
                      //…
                    });
                    </script>
                          

                    杜甫

                    杜甫的思想核心是儒家的仁政思想,他有“致君堯舜上,再使風俗淳”的宏偉抱負。杜甫雖然在世時名聲并不顯赫,但后來聲名遠播,對中國文學和日本文學都產生了深遠的影響。杜甫共有約1500首詩歌被保留了下來,大多集于《杜工部集》。

                    李清照

                    李清照出生于書香門第,早期生活優裕,其父李格非藏書甚富,她小時候就在良好的家庭環境中打下文學基礎。出嫁后與夫趙明誠共同致力于書畫金石的搜集整理。金兵入據中原時,流寓南方,境遇孤苦。所作詞,前期多寫其悠閑生活,后期多悲嘆身世,情調感傷。形式上善用白描手法,自辟途徑,語言清麗。

                    魯迅

                    魯迅一生在文學創作、文學批評、思想研究、文學史研究、翻譯、美術理論引進、基礎科學介紹和古籍校勘與研究等多個領域具有重大貢獻。他對于五四運動以后的中國社會思想文化發展具有重大影響,蜚聲世界文壇,尤其在韓國、日本思想文化領域有極其重要的地位和影響,被譽為“二十世紀東亞文化地圖上占最大領土的作家”。

                    在折疊面板的父容器設置屬性 lay-accordion 來開啟手風琴,那么在進行折疊操作時,始終只會展現當前的面板。

                    <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 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>
                          

                    layui - 用心與你溝通

                    亚洲图色