【Layui】03 按鈕 Button

文檔位置：

https://www.layui.com/doc/element/button.html

01、【按鈕主題】

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

必要樣式：

layui-btn 默認按鈕

主題樣式：

layui-btn layui-btn-primary 無色原始

layui-btn layui-btn-normal 百搭藍色

layui-btn layui-btn-warm 淡桔黃色

layui-btn layui-btn-danger 警告橙色

layui-btn layui-btn-disabled 灰白禁用

02、【大小類型】

<div>
    <button type="button" type="button" class="layui-btn layui-btn-lg">大型按鈕</button>
    <button type="button" type="button" class="layui-btn">默認按鈕</button>
    <button type="button" type="button" class="layui-btn layui-btn-sm">小型按鈕</button>
    <button type="button" type="button" class="layui-btn layui-btn-xs">迷你按鈕</button>
</div>

默認就是不需要寫，正常的

layui-btn layui-btn-lg 大按鈕
layui-btn layui-btn-sm 小按鈕
layui-btn layui-btn-xs 迷你按鈕

大小和顏色允許組合使用，沒有先后屬性的先后順序：

<span class="layui-btn layui-btn-normal layui-btn-lg">sadasd</span>

對渲染元素的要求僅僅是容器標簽即可

03、【流體化 Fluid】

屬性：

layui-btn-fluid

流體按鈕就是按鈕的寬度自適應到當前頁面的寬度

<button type="button" type="button" class="layui-btn layui-btn-fluid">流體按鈕（最大化適應）</button>

同樣適用於上述的顏色大小組合設置

04、【圓角化 Radius】

屬性：

layui-btn-radius

<span class="layui-btn layui-btn-radius layui-btn-warm">圓角按鈕</span>

05、【圖標組合 Icon combat】

官方的建議是按鈕就只渲染按鈕，圖標就只渲染圖標，然后再裝填文本內容

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

06、【按鈕組】

即一組按鈕，彼此沒有空隙間隔，使用一個組屬性修飾一組按鈕的容器

屬性：

layui-btn-group

案例：

    <div class="layui-btn-group">
        <button type="button" class="layui-btn">增加</button>
        <button type="button" class="layui-btn">編輯</button>
        <button type="button" class="layui-btn">刪除</button>
    </div>

07、【按鈕容器】

其意義是為了頁面排版，當按鈕數量多大10個以上就需要考慮容器類屬性進行排版渲染

屬性：

layui-btn-container

案例：

<div class="layui-btn-container">
  <button type="button" class="layui-btn">按鈕一</button> 
  <button type="button" class="layui-btn">按鈕二</button> 
  <button type="button" class="layui-btn">按鈕三</button> 
</div>