amazeui学习笔记--css（常用组件7）--输入框组Input-group

一、总结

1、使用：Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label

2、Icon组件及添加文字：

3、将单选框与复选框放入 .am-input-group-label 内：

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

1 
     
      2     
      
       3       
       4       
       5         手气还行6       7     
      
8   
     

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

---

目录

Input group 基于 Form 组件和 Button 组件扩展，依赖这两个组件。

在容器上添加 .am-input-group，在标签文字上添加 .am-input-group-label，具体请查看示例代码。

基本使用

输入框与标签

下面的代码中演示了结合 Icon 组件及添加文字的样式。

 Copy

.00

$.00

     
  
       
       
     
 
     
 
       
       
     
 
     
 
       
      .00 
     
 
     
 
      $ 
       
      .00 
     

复选/单选框与输入框

将单选框与复选框放入 .am-input-group-label 内。

 Copy

输入框结合 Button

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

 Copy

手气还行

     
  
      
 
       
 
            
         
       
 
      
 
      
 
       
 
         
         手气还行  
       
 
      
 
     

样式变换

尺寸

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

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

 Copy

@

@

@

     
  
      @ 
       
     
 
     
 
      @ 
       
     
 
     
 
      @ 
       
     

颜色

 Copy

     
  
       
       
     
 
     
       ... 
     
 
     
       ... 
     
 
     
       ... 
     
 
     
       ... 
     

使用按钮时除了在容器上设置颜色 class 外，还需要设置按钮的样式。

 Copy