layUI基本元素--樂字節前端

基本元素

按鈕

用法

​ 向任意HTML元素設定class="layui-btn"，創建一個基礎按鈕。經過追加格式爲layui-btn-{type}的class來定義其它按鈕風格。

<!-- 基礎按鈕 -->
<button type="button" class="layui-btn">一個標準的按鈕</button>
<a href="http://www.layui.com" class="layui-btn">一個可跳轉的按鈕</a>
<div class="layui-btn">一個按鈕</div>

主題

名稱	組合
原始	class="layui-btn layui-btn-primary"
默認	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

示例：

<!-- 不一樣主題的按鈕 -->
<button class="layui-btn">默認按鈕</button>
<button class="layui-btn layui-btn-primary">原始按鈕</button> 
<button class="layui-btn layui-btn-normal">百搭按鈕</button>
<button class="layui-btn layui-btn-warm">暖色按鈕</button>
<button class="layui-btn layui-btn-danger">警告按鈕</button>
<button class="layui-btn layui-btn-disabled">禁用按鈕</button>

尺寸

尺寸	組合
大型	class="layui-btn layui-btn-lg"
默認	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

<!-- 不一樣尺寸的按鈕 -->
<button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> 
<button class="layui-btn">默認</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">小型</button>
<button class="layui-btn layui-btn-xs">迷你</button>

圓角

layui-btn-radius

<button class="layui-btn layui-btn-radius">默認按鈕</button>
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按鈕</button> 
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按鈕</button>
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按鈕</button>
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按鈕</button>
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按鈕</button>

圖標

<button type="button" class="layui-btn">
    <i class="layui-icon">&#xe608;</i> 添加
</button>

<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
    <i class="layui-icon">&#x1002;</i> 刷新
</button>

導航

​ 導航通常指頁面引導性頻道集合，多以菜單的形式呈現，可應用於頭部和側邊。麪包屑結構簡單，支持自定義分隔符。

​ <font color="red">依賴加載模塊：element</font>

實現步驟：

1. 引入的資源

   <link rel="stylesheet" href="layui/css/layui.css">
   <script src="layui/layui.js"></script>

2. 依賴加載模塊

   <script type="text/javascript">
      // 注意：導航 依賴 element 模塊，不然沒法進行功能性操做
      layui.use('element', function(){
          var element = layui.element;
   
      });
   </script>

3. 顯示指定類型的導航

水平導航

<ul class="layui-nav">
    <li class="layui-nav-item"><a href="">最新活動</a></li>
    <li class="layui-nav-item layui-this"><a href="">產品</a></li>
    <li class="layui-nav-item"><a href="">大數據</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解決方案</a>
        <dl class="layui-nav-child"> <!-- 二級菜單 -->
            <dd><a href="">移動模塊</a></dd>
            <dd><a href="">後臺模版</a></dd>
            <dd><a href="">電商平臺</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社區</a></li>
</ul>

垂直/側邊導航

<ul class="layui-nav layui-nav-tree" >
<!-- 側邊導航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">默認展開</a>
    <dl class="layui-nav-child">
      <dd><a href="javascript:;">選項1</a></dd>
      <dd><a href="javascript:;">選項2</a></dd>
      <dd><a href="">跳轉</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item">
    <a href="javascript:;">解決方案</a>
    <dl class="layui-nav-child">
      <dd><a href="">移動模塊</a></dd>
      <dd><a href="">後臺模版</a></dd>
      <dd><a href="">電商平臺</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item"><a href="">產品</a></li>
  <li class="layui-nav-item"><a href="">大數據</a></li>
</ul>

水平、垂直、側邊三個導航的HTML結構是徹底同樣的，不一樣的是：

水平導航：layui-nav
垂直導航須要追加class：layui-nav-tree
側邊導航須要追加class：layui-nav-tree layui-nav-side

導航主題

​ 經過對導航追加CSS背景類，讓導航呈現不一樣的主題色

<!-- 如定義一個墨綠背景色的導航 -->
<ul class="layui-nav layui-bg-move" >
  …
</ul>

水平導航支持的其它背景主題有：layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（豔藍）
垂直導航支持的其它背景主題有：layui-bg-cyan（藏青）

麪包屑

<span class="layui-breadcrumb">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區</a>
  <a><cite>正文</cite></a>
</span>

你還能夠經過設置屬性 lay-separator="" 來自定義分隔符。例如：

<span class="layui-breadcrumb" lay-separator="-">
  <a href="">首頁</a>
  <a href="">國際新聞</a>
  <a href="">亞太地區</a>
  <a><cite>正文</cite></a>
</span>

選項卡

​ 導航菜單可應用於頭部和側邊，支持響應式，支持刪除選項卡等功能。

​ <font color="red">依賴加載模塊：element</font>

實現步驟

1. 引入的資源

   <link rel="stylesheet" href="layui/css/layui.css">
   <script src="layui/layui.js"></script>

2. 依賴加載模塊

   <script type="text/javascript">
      // 注意：選項卡 依賴 element 模塊，不然沒法進行功能性操做
      layui.use('element', function(){
          var element = layui.element;
   
      });
   </script>

3. 加載HTML

   <div class="layui-tab">
    <ul class="layui-tab-title">
      <li class="layui-this">網站設置</li>
      <li>用戶管理</li>
      <li>權限分配</li>
      <li>商品管理</li>
      <li>訂單管理</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">內容1</div>
      <div class="layui-tab-item">內容2</div>
      <div class="layui-tab-item">內容3</div>
      <div class="layui-tab-item">內容4</div>
      <div class="layui-tab-item">內容5</div>
    </div>
   </div>

選項卡風格

默認風格：layui-tab
簡潔風格須要追加class：layui-tab-brief
卡片風格須要追加class：layui-tab-card

帶刪除的選項卡

能夠對父層容器設置屬性 lay-allowClose="true" 來容許Tab選項卡被刪除

<div class="layui-tab" lay-allowClose="true">
  <ul class="layui-tab-title">
    <li class="layui-this">網站設置</li>
    <li>用戶管理</li>
    <li>權限分配</li>
    <li>商品管理</li>
    <li>訂單管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">內容1</div>
    <div class="layui-tab-item">內容2</div>
    <div class="layui-tab-item">內容3</div>
    <div class="layui-tab-item">內容4</div>
    <div class="layui-tab-item">內容5</div>
  </div>
</div>

表格

常規用法

<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>暱稱</th>
      <th>加入時間</th>
      <th>簽名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>賢心</td>
      <td>2016-11-29</td>
      <td>人生就像是一場修行</td>
    </tr>
    <tr>
      <td>許閒心</td>
      <td>2016-11-28</td>
      <td>於千萬人之中碰見你所碰見的人，於千萬年之中，時間的無涯的荒野裏…</td>
    </tr>
  </tbody>
</table>

基礎屬性

屬性名	屬性值	備註
lay-even	無	用於開啓 隔行 背景，可與其它屬性一塊兒使用
lay-skin="屬性值"	line （行邊框風格） <br />row （列邊框風格） <br />nob （無邊框風格）	若使用默認風格不設置該屬性便可
lay-size="屬性值"	sm （小尺寸） <br /> lg （大尺寸）	若使用默認尺寸不設置該屬性便可

你所須要的基礎屬性寫在table標籤上，例如：

<!-- 一個帶有隔行背景，且行邊框風格的大尺寸表格 -->
<table class="layui-table" lay-even lay-size="lg" lay-skin="row">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>暱稱</th>
      <th>加入時間</th>
      <th>簽名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>賢心</td>
      <td>2016-11-29</td>
      <td>人生就像是一場修行</td>
    </tr>
    <tr>
      <td>許閒心</td>
      <td>2016-11-28</td>
      <td>於千萬人之中碰見你所碰見的人，於千萬年之中，時間的無涯的荒野裏…</td>
    </tr>
  </tbody>
</table>