ng-zorror-antd------Input輸入框

使用 ng-zorror-antd 來美化界面，帶着問題挖掘技術：

一：基本使用

       效果圖：

　

 

　　問題一：如何人為控制輸入框長度，如上效果圖，讓一個輸入框長，一個輸入框短？（注意：該輸入框是最簡單的輸入框，只是一個單純的輸入框）

         

　　html 代碼：

<input class="input1" nz-input placeholder="Basic usage">

<input class="input2" nz-input placeholder="Basic usage" [disabled]="true">

　　CSS 代碼

[nz-input]{
  margin-left: 500px;
}

[nz-input].input1{
  width: 200px;
  margin-top: 50px;
  margin-bottom: 50px;
  display: block;
}

[nz-input].input2{
  width: 800px;
}

　　解決辦法：

　　針對這種簡單的，比較單純的輸入框，給他們分別賦不同的 類 class ，在上面的例子中，給第一個輸入框賦類  input1，給第二個輸入框賦類 input2，通過 [nz-input]+類名 ，可以對其分別賦予樣式。

 

 

二、三種大小

　　效果圖： 　

　

　　問題：如上效果圖，三種輸入框的高度為什么不一樣？通過什么設置？輸入框自身的類是什么？

　　html 代碼：

<div class="input-list">
  <input nz-input placeholder="large size" [nzSize]="'large'">
  <input nz-input placeholder="default size" nzSize="default">
  <input nz-input placeholder="small size" nzSize="small">
</div>

　　CSS代碼：

div{
  width: 400px;
  margin-left: 700px;
  margin-top: 300px;
}

.ant-input{
  margin: 0 8px 20px 0px;
}

　　解決辦法：

　　①[nz-input] 輸入框 的參數：

　　[nzSize]  標記控件的大小，取值結果有 ‘large’ （40px）| 'small'（32px） | 'default'（24px） 三種，默認值是 ‘default’ ，標准表單內的輸入框大小限制為 ‘large’ 。

　　② <input  nz-input  nzSize | [ nzSize ] = " **** " />  nzSize 和 [ nzSize ] 的區別

　　nzSize----> 直接跟值的名字，不需要加 引號；

　　[ nzSize ] ---->  綁定類型，需要加引號。

　　③ input 輸入框的類名字 ： .ant-input

 

三、前置后置標簽（上）

 　　效果圖：

　　

　　問題：input 輸入框 前后放置標簽提示用戶如何實現？

　　html 代碼

<div class="container">
  <nz-input-group nzAddOnAfter=".com" nzAddOnBefore="Http://">
    <input nz-input placeholder="my site">
  </nz-input-group>
</div>

　　　CSS 代碼

div.container{
  width: 400px;
  margin-left: 200px;
  margin-top: 200px;
}

　　注意事項：

　　① <nz-input-group></nz-input-group>  本質上和  <input nz-input> 輸入框一樣，就是一個輸入框，不過他可以在 input 輸入框的前面和后面插入一些其他的東西，讓 input 輸入框顯得非常漂亮，這個在后面的講解中會進行大量的示例。

　　②  <nz-input-group></nz-input-group>  的部分屬性：

　　　　（1）[nzAddOnAfter]     帶標簽的 input，設置后置標簽      string | TemplateRef<void>

　　　　（2）[nzAddOnBefore]    帶標簽的 input，設置前置標簽    string | TemplateRef<void>

 

四、前置后置標簽（下）

　　效果圖：

                            

　　問題：input 輸入框前后放置 下拉框 如何實現？

　　html 代碼

<div class="container">
  <ng-template #addOnBeforeTemplate>
    <nz-select [ngModel]="'Http://'">
      <nz-option nzLabel="Http://" nzValue="Http://"></nz-option>
      <nz-option nzLabel="Https://" nzValue="Https://"></nz-option>
    </nz-select>
  </ng-template>

  <ng-template #addOnAfterTemplate>
    <nz-select [ngModel]="'.com'">
      <nz-option nzLabel=".com" nzValue=".com"></nz-option>
      <nz-option nzLabel=".jp" nzValue=".jp"></nz-option>
      <nz-option nzLabel=".cn" nzValue=".cn"></nz-option>
      <nz-option nzLabel=".org" nzValue=".org"></nz-option>
    </nz-select>
  </ng-template>

  <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
    <input nz-input>
  </nz-input-group>
</div>

　　CSS 代碼

div.container{
  width: 400px;
  margin-left: 200px;
  margin-top: 200px;
}

　　解決方案：

　　建立  <ng-template></ng-template> 模板，給模板命名如代碼所示：然后在模板中插入 下拉框 ，將模板名字 賦值給 <nz-input-group></nz-input-group> 的  [nzAddOnBefore] 、[nzAddOnAfter] 屬性

 

另外一種實現方式：

　　

　　html 代碼

<nz-input-group nzCompact style="margin-top: 100px;margin-left: 500px">
  <nz-select [ngModel]="'Zhejiang'">
    <nz-option nzLabel="Zhejiang" nzValue="Zhejiang"></nz-option>
    <nz-option nzLabel="Jiangsu" nzValue="Jiangsu"></nz-option>
  </nz-select>

  <input type="text" nz-input [ngModel]="'Xihu District Hangzhou'" style="width: 10%">
</nz-input-group>

　　解析：上述實現過程中，要注意以下幾點：

　　①   <nz-input-group></nz-input-group>  中可以通過給定 style 屬性對其位置進行調整；

　　②   <nz-input-group></nz-input-group>  中不僅僅能包含 input 輸入框，還可以包含 select 下拉框；

　　③   <nz-input-group></nz-input-group>  中的屬性  nzCompact  是否用緊湊模式   boolen  ，默認為 false ，在上面的代碼中，我們使用默認值，可以看出 select 下拉框 和 input 輸入框是並列的關系；

　　④   input 下拉框中也可以給定 style 對其樣式進行設計；

 注意：

使用 nzCompact 模式時，不需要通過 nz-col 來控制寬度

 

五、前綴后綴按鈕和標簽

　　效果圖：

　　第一個輸入框相關代碼：

　　html代碼：

<nz-input-group [nzSuffix]="suffixIcon" style="margin-top: 50px;margin-left: 800px;margin-bottom: 20px;width: 400px">
 <input type="text" nz-input placeholder="input search text">
</nz-input-group >

<ng-template #suffixIcon><i nz-icon [nzType]="'search'" ></i></ng-template>

　　解析：建立一個  <ng-template></ng-template>  ，給其起名字為  suffixIcon  ，在里面加入 圖標    <i nz-icon [nzType]="'search'" ></i>，將模板賦值給 <nz-input-group> 標簽的 nzSuffix 屬性，這樣小圖標就在輸入框的右邊顯示了。

　　

　　第二個輸入框相關代碼：

　　html 代碼：

<nz-input-group nzSearch [nzAddOnAfter]="suffixIconInButtonSearch" style="margin-left: 800px;margin-bottom: 20px;width: 400px">
  <input type="text" nz-input placeholder="input search text">
</nz-input-group>

<ng-template #suffixIconInButtonSearch>
  <button nz-button nzType="primary" nzSearch><i nz-icon [nzType]="'search'"></i></button>
</ng-template>

　　解析：

　　　　①  <nz-input-group></nz-input-group> 標簽中需要加入  [nzSearch]  屬性，表示 是否用搜索框，類型 boolen ， 默認為false，這樣就不會和我們做的 搜索框 沖突，不然 搜索按鈕會顯得特別難看；

　　　　② 建立一個 <ng-template></ng-template>  ，給其起名字為 suffixIconInButtonSearch，在里面加入按鈕 ，同時加入按鈕的  nzSearch屬性，按鈕填值的地方將搜索圖標放進去，將模板賦值給 <nz-input-group> 標簽的 nzAddOnAfter 屬性，這樣搜索按鈕就在輸入框的右邊顯示了。

 

　　第三個輸入框相關代碼：

　　html 代碼：

<nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixButton" style="margin-left: 800px;margin-bottom: 20px;width: 400px">
  <input type="text" nz-input placeholder="input search text">
</nz-input-group>

<ng-template #suffixButton>
  <button nz-button nzType="primary" nzSearch nzSize="large">Search</button>
</ng-template>

　　不解釋了，很好理解。