amazeui學習筆記--css（常用組件7）--輸入框組Input-group

一、總結

1、使用：Input group 基於 Form 組件和 Button 組件擴展，依賴這兩個組件。在容器上添加 .am-input-group，在標簽文字上添加 .am-input-group-label

2、Icon組件及添加文字：

<div class="am-input-group">
  <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
  <input type="text" class="am-form-field" placeholder="Username">
</div>

3、將單選框與復選框放入 .am-input-group-label 內：

<div class="am-input-group">
      <span class="am-input-group-label">
        <input type="radio">
      </span>

4、輸入框結合button：需要用 .am-input-group-btn 包住按鈕，而不是 .am-input-group-label。

<div class="am-u-lg-6">
    <div class="am-input-group">
      <input type="text" class="am-form-field">
      <span class="am-input-group-btn">
        <button class="am-btn am-btn-default" type="button">手氣還行</button>
      </span>
    </div>
  </div>

5、尺寸變換：在 .am-input-group 添加標明尺寸的 class 即可。包含 .am-input-group-lg、.am-input-group-sm。<div class="am-input-group am-input-group-lg">

6、顏色：<div class="am-input-group am-input-group-secondary">

 

 

二、輸入框組Input-group

Input Group

---

目錄

• 基本使用
  • 輸入框與標簽
  • 復選/單選框與輸入框
  • 輸入框結合 Button
• 樣式變換
  • 尺寸
  • 顏色

Input group 基於 Form 組件和 Button 組件擴展，依賴這兩個組件。

在容器上添加 .am-input-group，在標簽文字上添加 .am-input-group-label，具體請查看示例代碼。

基本使用

輸入框與標簽

下面的代碼中演示了結合 Icon 組件及添加文字的樣式。

 Copy

.00

$.00

<div class="am-input-group"> <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span> <input type="text" class="am-form-field" placeholder="Username"> </div> <div class="am-input-group"> <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span> <input type="text" class="am-form-field" placeholder="Password"> </div> <div class="am-input-group"> <input type="text" class="am-form-field"> <span class="am-input-group-label">.00</span> </div> <div class="am-input-group"> <span class="am-input-group-label">$</span> <input type="text" class="am-form-field"> <span class="am-input-group-label">.00</span> </div>

復選/單選框與輸入框

將單選框與復選框放入 .am-input-group-label 內。

 Copy

<div class="am-g"> <div class="am-u-lg-6"> <div class="am-input-group"> <span class="am-input-group-label"> <input type="checkbox"> </span> <input type="text" class="am-form-field"> </div> </div> <div class="am-u-lg-6"> <div class="am-input-group"> <span class="am-input-group-label"> <input type="radio"> </span> <input type="text" class="am-form-field"> </div> </div> </div>

輸入框結合 Button

需要用 .am-input-group-btn 包住按鈕，而不是 .am-input-group-label。

 Copy

手氣還行

<div class="am-g"> <div class="am-u-lg-6"> <div class="am-input-group"> <span class="am-input-group-btn"> <button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button> </span> <input type="text" class="am-form-field"> </div> </div> <div class="am-u-lg-6"> <div class="am-input-group"> <input type="text" class="am-form-field"> <span class="am-input-group-btn"> <button class="am-btn am-btn-default" type="button">手氣還行</button> </span> </div> </div> </div>

樣式變換

尺寸

在 .am-input-group 添加標明尺寸的 class 即可。

包含 .am-input-group-lg、.am-input-group-sm。

 Copy

@

@

@

<div class="am-input-group am-input-group-lg"> <span class="am-input-group-label">@</span> <input type="text" class="am-form-field" placeholder="Username"> </div> <div class="am-input-group"> <span class="am-input-group-label">@</span> <input type="text" class="am-form-field" placeholder="Username"> </div> <div class="am-input-group am-input-group-sm"> <span class="am-input-group-label">@</span> <input type="text" class="am-form-field" placeholder="Username"> </div>

顏色

 Copy

<div class="am-input-group am-input-group-primary"> <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span> <input type="text" class="am-form-field" placeholder="你的大名"> </div> <div class="am-input-group am-input-group-secondary"> ... </div> <div class="am-input-group am-input-group-success"> ... </div> <div class="am-input-group am-input-group-warning"> ... </div> <div class="am-input-group am-input-group-danger"> ... </div>

使用按鈕時除了在容器上設置顏色 class 外，還需要設置按鈕的樣式。

 Copy

<div class="am-g"> <div class="am-u-lg-6"> <div class="am-input-group am-input-group-danger"> <span class="am-input-group-label"> <input type="checkbox"> </span> <input type="text" class="am-form-field"> </div> </div> <div class="am-u-lg-6"> <div class="am-input-group am-input-group-primary"> <span class="am-input-group-btn"> <button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button> </span> <input type="text" class="am-form-field"> </div> </div> </div>