InputGroupText, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside .ui-inputgroup element. Multiple addons can be used within the same group as well.

InputGroup - 图1

  • inputgroupdemo.html
  • inputgroupdemo.ts

    inputgroupdemo.html

    View on GitHub
  1.     
  2. <h3 class="first">Addons</h3>
  3. <div class="ui-g ui-fluid">
  4.     <div class="ui-g-12 ui-md-4">
  5.         <div class="ui-inputgroup">
  6.             <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
  7.             <input type="text" pInputText placeholder="Username">         
  8.         </div>
  9.     </div>
  11.     <div class="ui-g-12 ui-md-4">
  12.         <div class="ui-inputgroup">
  13.             <span class="ui-inputgroup-addon">$</span>
  14.             <input type="text" pInputText placeholder="Price">   
  15.             <span class="ui-inputgroup-addon">.00</span>      
  16.         </div>
  17.     </div>
  19.     <div class="ui-g-12 ui-md-4">
  20.         <div class="ui-inputgroup">
  21.             <span class="ui-inputgroup-addon">www</span>
  22.             <input type="text" pInputText placeholder="Website">      
  23.         </div>
  24.     </div>
  25. </div>
  27. <h3>Multiple Addons</h3>
  28. <div class="ui-g">
  29.     <div class="ui-g-12">
  30.         <div class="ui-inputgroup">
  31.             <span class="ui-inputgroup-addon"><i class="fa fa-credit-card"></i></span>  
  32.             <span class="ui-inputgroup-addon"><i class="fa fa-cc-visa"></i></span>   
  33.             <input type="text" pInputText placeholder="Price"> 
  34.             <span class="ui-inputgroup-addon">$</span>  
  35.             <span class="ui-inputgroup-addon">.00</span>      
  36.         </div>
  37.     </div>
  38. </div>
  40. <h3>Button Addons</h3>
  41. <div class="ui-g ui-fluid">
  42.     <div class="ui-g-12 ui-md-4">
  43.         <div class="ui-inputgroup">
  44.             <button pButton type="button" label="Search"></button>
  45.             <input type="text" pInputText placeholder="Keyword">         
  46.         </div>
  47.     </div>
  49.     <div class="ui-g-12 ui-md-4">
  50.         <div class="ui-inputgroup">
  51.             <input type="text" pInputText placeholder="Keyword">   
  52.             <button pButton type="button" icon="fa fa-superpowers" class="ui-button-warn"></button>      
  53.         </div>
  54.     </div>
  56.     <div class="ui-g-12 ui-md-4">
  57.         <div class="ui-inputgroup">
  58.             <button pButton type="button" icon="pi pi-check" class="ui-button-success"></button>    
  59.             <input type="text" pInputText placeholder="Vote">   
  60.             <button pButton type="button" icon="pi pi-close" class="ui-button-danger"></button>      
  61.         </div>
  62.     </div>
  63. </div>
  65. <h3>Checkbox and RadioButton</h3>
  66. <div class="ui-g ui-fluid">
  67.     <div class="ui-g-12 ui-md-4">
  68.         <div class="ui-inputgroup">
  69.             <span class="ui-inputgroup-addon"><p-checkbox></p-checkbox></span>
  70.             <input type="text" pInputText placeholder="Username">         
  71.         </div>
  72.     </div>
  74.     <div class="ui-g-12 ui-md-4">
  75.         <div class="ui-inputgroup">
  76.             <input type="text" pInputText placeholder="Price">   
  77.             <span class="ui-inputgroup-addon"><p-radioButton></p-radioButton></span>      
  78.         </div>
  79.     </div>
  81.     <div class="ui-g-12 ui-md-4">
  82.         <div class="ui-inputgroup">
  83.             <span class="ui-inputgroup-addon"><p-checkbox></p-checkbox></span>
  84.             <input type="text" pInputText placeholder="Website">      
  85.             <span class="ui-inputgroup-addon"><p-radioButton></p-radioButton></span> 
  86.         </div>
  87.     </div>
  88. </div>
  89.  

inputgroupdemo.ts

  2. export class InputGroupDemo {
  4. }
  5.