5、公共樣式 · EasyAdmin用戶手冊集合

## 5.1.公共類 :id=public 類名（class） | 說明 :---|:--- pull-left | 左浮動 pull-right | 右浮動 text-left | 內容居左 text-center | 內容居中 text-right | 內容居右 inline-block | 設置display為inline-block bg-white | 設置背景為白色 layui-link | 設置a標簽顏色為主題色 layui-text | .layui-text下面的a標簽為藍色 | text-muted | 文字顏色為灰色 text-success | 文字顏色為綠色，成功色 text-warning | 文字顏色為黃色警告色 text-danger | 文字顏色為紅色危險色 text-info | 文字顏色為藍色信息色 text-primary | 文字顏色為主題色以上是easyweb增加的公共類，當然也可以使用[Layui公共類](https://www.layui.com/doc/base/element.html)。 ## 5.2.組件樣式 :id=module 類名（class） | 說明 :---|:--- icon-btn | 帶圖標的按鈕，會縮小邊距 date-icon | 在元素的右邊加入日期的圖標 icon-search | 在元素的右邊加入搜索的圖標 btn-circle | 圓形按鈕，參見便簽界面 | layui-form-select-top | 控制下拉框上彈出，加載select父元素上 xm-select-nri | 多選下拉框去掉最后那個沒用的圖標，加在父元素上 | mini-bar | 如果有滾動條，使用細的風格 | arrow2 | 設置側邊欄小三角為箭頭圖標，加在layui-nav上 arrow3 | 設置側邊欄小三角為加減號圖標，加在layui-nav上 | close-footer | 關閉頁腳，加在body上 | table-tool-mini | 數據表格工具欄mini樣式，加在table父元素上 full-table | 針對full-xxx的table的工具欄mini樣式 | hide-body-title | 全局隱藏單標簽模式標題欄，加在body上 ```html  <button class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button>  <input class="layui-input date-icon" type="text"/>  <div class="btn-circle"> <i class="layui-icon layui-icon-add-1"></i> </div>  <div class="layui-form-select-top"> <select>....</select> </div>  <div class="xm-select-nri"> <select xm-select="xx">....</select> </div>  <body class="layui-layout-body close-footer">  <div class="table-tool-mini full-table"> <table id="xxTable" lay-filter="xxTable"></table> </div> ``` ![](https://s2.ax1x.com/2019/08/28/mTfj0K.png) ![](https://s2.ax1x.com/2019/07/06/ZwTtMD.jpg) ![](https://s2.ax1x.com/2019/07/11/Z2UdEV.png) ## 5.3.表單彈窗 :id=form 類名（class） | 說明 :---|:--- model-form | 調整彈窗內的表單的間距使之更好看 model-form-body | 表單內容部分，高度自適應，超過屏幕高度顯示滾動條 model-form-footer | 表單底部按鈕部分，用于固定底部按鈕 **表單彈窗示例：** ```html <script type="text/html" id="modelUser"> <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form"> <input name="userId" type="hidden"/> <div class="layui-form-item"> <label class="layui-form-label">賬號</label> <div class="layui-input-block"> <input name="username" placeholder="請輸入賬號" type="text" class="layui-input" maxlength="20" lay-verType="tips" lay-verify="required" required/> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性別</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男" checked/> <input type="radio" name="sex" value="女" title="女"/> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">角色</label> <div class="layui-input-block"> <select name="roleId" lay-verType="tips" lay-verify="required"> <option value="">請選擇角色</option> <option value="1">管理員</option> <option value="2">普通用戶</option> </select> </div> </div> <div class="layui-form-item text-right"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button> </div> </form> </script> <script> layui.use(['admin'],function(){ var admin = layui.admin; admin.open({ type: 1, title: '添加用戶', content: $('#modelUser').html(), success: function (layero, dIndex) { // 表單的操作，事件綁定等都寫在success回調里面 } }); }); </script> ``` ![](https://s2.ax1x.com/2019/08/28/mTh3n0.png) **固定底部操作按鈕示例：** ```html <script type="text/html" id="modelUser"> <form id="modelUserForm" lay-filter="modelUserForm" class="layui-form model-form no-padding"> <div class="model-form-body" style="max-height: 320px;">  <div class="layui-form-item"> <label class="layui-form-label">實習公司</label> <div class="layui-input-block"> <input name="companyName" class="layui-input"/> </div> </div>  </div> <div class="layui-form-item text-right model-form-footer"> <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button> <button class="layui-btn" lay-filter="modelSubmitUser" lay-submit>保存</button> </div> </form> </script> ``` ![](https://s2.ax1x.com/2019/08/28/mThoHf.png) > 兩者的區別就在于固定底部操作按鈕需要增加model-form-body和model-form-footer，而普通的表單彈窗只需要model-form ## 5.4.表格工具欄 :id=toolbar 類名（class） | 說明 :---|:--- toolbar | 調整表格上面的表單間距使之更好看 w-auto | 設置width:auto，用于重置一些有固定寬度表單元素 mr0 | 設置margin-right:0，用于重置一些表單元素的樣式 ```html  <div class="layui-form toolbar"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label w-auto">賬&emsp;號：</label> <div class="layui-input-inline mr0"> <input name="username" class="layui-input" type="text" placeholder="輸入賬號"/> </div> </div> <div class="layui-inline"> <label class="layui-form-label w-auto">用戶名：</label> <div class="layui-input-inline mr0"> <input name="nickName" class="layui-input" type="text" placeholder="輸入用戶名"/> </div> </div> <div class="layui-inline"> <button class="layui-btn icon-btn" lay-filter="formSubSearchUser" lay-submit> <i class="layui-icon"></i>搜索 </button> <button id="btnAddUser" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button> </div> </div> </div>  <table class="layui-table" id="tableUser" lay-filter="tableUser"></table> ``` ![](https://s2.ax1x.com/2019/08/28/mTfUyt.png) **移動端自動適配效果：** ![](https://s2.ax1x.com/2019/08/28/mTfrFg.png)