Layui-card——打造優美的卡片式UI設計

一、背景色的改變

layui-card是Layui核心組件之一，廣泛應用於各種UI設計中。其具有簡單易用、豐富的功能和完美的UI效果等特點，成為開發者進行UI設計的首選之一。

layui-card的背景色可以通過修改其class屬性中的色彩值來進行調整。class屬性值通常由class=”layui-card xxx”組成，其中xxx是可變的，可以為layui-bg-red、layui-bg-orange、layui-bg-green和layui-bg-black四種色彩值中的任意一種。具體代碼如下：

<div class="layui-card layui-bg-red">
  <div class="layui-card-header"></div>
  <div class="layui-card-body"></div>
</div>

這樣，我們就可以將layui-card的背景色改為red色。同樣的，當我們將class=”layui-card xxx”中的xxx替換為其他可選色彩值時，也可以實現換膚等效果，滿足UI設計的多樣性需求。

二、標題欄的定製

標題欄是layui-card中的關鍵組成部分，也是內容展示的入口。為了讓內容更加生動有趣，我們可以對標題欄進行定製。如何實現呢？下面提供兩個樣例。

樣例一：在標題欄中加入圖標

<div class="layui-card">
  <div class="layui-card-header"><i class="layui-icon layui-icon-app"></i> 應用列表</div>
  <div class="layui-card-body"></div>
</div>

使用上述代碼，我們可以在標題欄中加入圖標。代碼中的layui-icon-app是一個圖標的class名稱，需要使用Layui的字體圖標庫來實現。

樣例二：在標題欄中加入按鈕

<div class="layui-card">
  <div class="layui-card-header">列表信息 <button class="layui-btn layui-btn-sm layui-btn-normal" style="float:right;margin-top:-5px;">添加 </button></div>
  <div class="layui-card-body"></div>
</div>

使用上述代碼，我們可以在標題欄中加入一個按鈕，方便用戶進行操作。代碼中的layui-btn、layui-btn-sm和layui-btn-normal都是Layui的按鈕組件，需要引用對應的CSS和JS文件才能正常使用。其中style=”float:right;margin-top:-5px;”是為了將按鈕定位在標題欄的右上角位置，也可以根據實際需求進行調整。

三、內容的一般展示

內容展示是layui-card的主要功能，為了使內容更加生動有趣，我們可以採用多種方式進行展示。

樣例一：採用列表形式展示

<div class="layui-card">
  <div class="layui-card-header">列表信息</div>
  <div class="layui-card-body">
    <ul class="layui-nav layui-nav-tree">
      <li class="layui-nav-item"><a href="">新聞管理</a></li>
      <li class="layui-nav-item layui-nav-itemed">
        <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>
  </div>
</div>

使用上述代碼，我們可以展示一個列表信息，該信息採用了Layui的導航菜單組件，並且通過class屬性來設置展示效果。其中layui-nav表示用於展示導航的基礎類名，layui-nav-tree表示用於展示帶自身子菜單的垂直風格導航，layui-nav-item是其中的子元素。

樣例二：採用表格形式展示

<div class="layui-card">
  <div class="layui-card-header">表格信息</div>
  <div class="layui-card-body">
    <table class="layui-table">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性別</th>
          <th>城市</th>
          <th>簽名</th>
        </tr> 
      </thead>
      <tbody>
        <tr>
          <td>張三</td>
          <td>男</td>
          <td>上海</td>
          <td>我就是我，不一樣的煙火</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>北京</td>
          <td>長路漫漫，唯劍作伴</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>男</td>
          <td>南京</td>
          <td>路漫漫其修遠兮，吾將上下而求索</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

使用上述代碼，我們可以展示一個表格信息，該信息採用了Layui的表格組件，並且通過class屬性來設置展示效果。其中layui-table表示表格的基礎類名，含有表頭和表體兩部分內容。

四、滾動條的使用

如果內容過多，一般情況下會採用滾動條進行查看。Layui中的卡片式UI設計也有滾動條的應用。

<div class="layui-card">
  <div class="layui-card-header">滾動條</div>
  <div class="layui-card-body" style="height: 200px; overflow:auto">
    <p>這裡是內容1，雙擊下方菜單開放發現更多</p>
    <p>這裡是內容2</p>
    <p>這裡是內容3</p>
    <p>這裡是內容4</p>
    <p>這裡是內容5</p>
    <p>這裡是內容6</p>
    <p>這裡是內容7</p>
    <p>這裡是內容8</p>
    <p>這裡是內容9</p>
    <p>這裡是內容10</p>
    <p>這裡是內容11</p>
    <p>這裡是內容12</p>
    <p>這裡是內容13</p>
    <p>這裡是內容14</p>
    <p>這裡是內容15</p>
  </div>
</div>

使用上述代碼，我們可以展示一個含有滾動條的卡片信息，該信息採用了Layui的滾動條組件，並且通過style屬性來設置滾動條的高度和寬度。overflow:auto表示當內容超出範圍時，自動生成滾動條，保證用戶可以順利查看內容。