Skip to content

Commit 0a6c625

Browse files
HyperLife1119HyperLife1119
authored
docs: replace nz-input-group with nz-input-wrapper (#9497)
1 parent 6a40b0d commit 0a6c625

File tree

14 files changed

+63
-92
lines changed

14 files changed

+63
-92
lines changed

‎components/auto-complete/autocomplete.spec.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1220,18 +1220,17 @@ class NzTestAutocompleteWithObjectOptionComponent {
12201220
@Component({
12211221
imports: [NzAutocompleteModule, NzInputModule],
12221222
template: `
1223-
<nz-input-group #inputGroupComponent nzSize="large" [nzSuffix]="suffixIcon">
1224-
<input placeholder="input here" nz-input [nzAutocomplete]="auto" />
1225-
<ng-template #suffixIcon></ng-template>
1223+
<nz-input-wrapper #inputGroupComponent>
1224+
<input placeholder="input here" nz-input nzSize="large" [nzAutocomplete]="auto" />
12261225
<nz-autocomplete #auto>
12271226
<nz-auto-option nzValue="value">label</nz-auto-option>
12281227
</nz-autocomplete>
1229-
</nz-input-group>
1228+
</nz-input-wrapper>
12301229
`
12311230
})
12321231
class NzTestAutocompleteWithGroupInputComponent {
1233-
@ViewChild(NzAutocompleteTriggerDirective, { static: false }) trigger!: NzAutocompleteTriggerDirective;
1234-
@ViewChild('inputGroupComponent', { static: false, read: ElementRef }) inputGroupComponent!: ElementRef;
1232+
@ViewChild(NzAutocompleteTriggerDirective, { static: true }) trigger!: NzAutocompleteTriggerDirective;
1233+
@ViewChild('inputGroupComponent', { static: true, read: ElementRef }) inputGroupComponent!: ElementRef;
12351234
}
12361235

12371236
describe('auto-complete', () => {

‎components/auto-complete/demo/certain-category.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,16 @@ interface AutocompleteOptionGroups {
1717
encapsulation: ViewEncapsulation.None,
1818
template: `
1919
<div class="example-input">
20-
<nz-input-group nzSize="large" [nzSuffix]="suffixIcon">
20+
<nz-input-wrapper>
2121
<input
2222
placeholder="input here"
2323
nz-input
2424
[(ngModel)]="inputValue"
2525
(ngModelChange)="onChange($event)"
2626
[nzAutocomplete]="auto"
2727
/>
28-
</nz-input-group>
29-
<ng-template #suffixIcon>
30-
<nz-icon nzType="search" />
31-
</ng-template>
28+
<nz-icon nzInputSuffix nzType="search" />
29+
</nz-input-wrapper>
3230
<nz-autocomplete #auto>
3331
@for (group of optionGroups; track group.title) {
3432
<nz-auto-optgroup [nzLabel]="groupTitle">

‎components/auto-complete/demo/uncertain-category.ts‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,16 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1111
imports: [FormsModule, NzAutocompleteModule, NzButtonModule, NzIconModule, NzInputModule],
1212
encapsulation: ViewEncapsulation.None,
1313
template: `
14-
<nz-input-group nzSearch nzSize="large" [nzAddOnAfter]="suffixIconButton">
14+
<nz-input-search nzEnterButton>
1515
<input
16-
placeholder="input here"
1716
nz-input
17+
placeholder="input here"
18+
nzSize="large"
1819
[(ngModel)]="inputValue"
1920
(input)="onChange($event)"
2021
[nzAutocomplete]="auto"
2122
/>
22-
</nz-input-group>
23-
<ng-template #suffixIconButton>
24-
<button nz-button nzType="primary" nzSize="large" nzSearch>
25-
<nz-icon nzType="search" nzTheme="outline" />
26-
</button>
27-
</ng-template>
23+
</nz-input-search>
2824
<nz-autocomplete #auto>
2925
@for (option of options; track option.category) {
3026
<nz-auto-option class="search-item" [nzValue]="option.category">

‎components/color-picker/color-format.component.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ import {
2828
} from '@angular/forms';
2929
import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
3030

31-
import { NzInputDirective, NzInputGroupComponent } from 'ng-zorro-antd/input';
32-
import { NzInputNumberComponent } from 'ng-zorro-antd/input-number';
31+
import { NzInputModule } from 'ng-zorro-antd/input';
32+
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
3333
import { NzSelectModule } from 'ng-zorro-antd/select';
3434

3535
import { generateColor } from './src/util/util';
@@ -39,7 +39,7 @@ import { NzColorPickerFormatType, ValidFormKey } from './typings';
3939
selector: 'nz-color-format',
4040
exportAs: 'nzColorFormat',
4141
changeDetection: ChangeDetectionStrategy.OnPush,
42-
imports: [ReactiveFormsModule, NzSelectModule, NzInputDirective, NzInputGroupComponent, NzInputNumberComponent],
42+
imports: [ReactiveFormsModule, NzSelectModule, NzInputModule, NzInputNumberModule],
4343
template: `
4444
<div [formGroup]="validateForm" class="ant-color-picker-input-container">
4545
<div class="ant-color-picker-format-select">
@@ -54,9 +54,9 @@ import { NzColorPickerFormatType, ValidFormKey } from './typings';
5454
@switch (validateForm.controls.isFormat.value) {
5555
@case ('hex') {
5656
<div class="ant-color-picker-hex-input">
57-
<nz-input-group nzPrefix="#" nzSize="small">
57+
<nz-input-wrapper nzPrefix="#">
5858
<input nz-input nzSize="small" formControlName="hex" />
59-
</nz-input-group>
59+
</nz-input-wrapper>
6060
</div>
6161
}
6262
@case ('hsb') {

‎components/drawer/demo/from-drawer.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
3535
<nz-form-item>
3636
<nz-form-label>Url</nz-form-label>
3737
<nz-form-control>
38-
<nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">
38+
<nz-input-wrapper nzAddonBefore="http://" nzAddonAfter=".com">
3939
<input type="text" nz-input placeholder="please enter url" />
40-
</nz-input-group>
40+
</nz-input-wrapper>
4141
</nz-form-control>
4242
</nz-form-item>
4343
</div>

‎components/form/demo/horizontal-login.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,18 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1212
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
1313
<nz-form-item>
1414
<nz-form-control nzErrorTip="Please input your username!">
15-
<nz-input-group nzPrefixIcon="user">
15+
<nz-input-wrapper>
16+
<nz-icon nzInputPrefix nzType="user" />
1617
<input formControlName="username" nz-input placeholder="username" />
17-
</nz-input-group>
18+
</nz-input-wrapper>
1819
</nz-form-control>
1920
</nz-form-item>
2021
<nz-form-item>
2122
<nz-form-control nzErrorTip="Please input your Password!">
22-
<nz-input-group nzPrefixIcon="lock">
23-
<input formControlName="password" nz-input type="password" placeholder="Password" />
24-
</nz-input-group>
23+
<nz-input-password>
24+
<nz-icon nzInputPrefix nzType="lock" />
25+
<input formControlName="password" nz-input placeholder="Password" />
26+
</nz-input-password>
2527
</nz-form-control>
2628
</nz-form-item>
2729
<nz-form-item>

‎components/form/demo/normal-login.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@ import { NzInputModule } from 'ng-zorro-antd/input';
1313
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
1414
<nz-form-item>
1515
<nz-form-control nzErrorTip="Please input your username!">
16-
<nz-input-group nzPrefixIcon="user">
16+
<nz-input-wrapper>
17+
<nz-icon nzInputPrefix nzType="user" />
1718
<input type="text" nz-input formControlName="username" placeholder="Username" />
18-
</nz-input-group>
19+
</nz-input-wrapper>
1920
</nz-form-control>
2021
</nz-form-item>
2122
<nz-form-item>
2223
<nz-form-control nzErrorTip="Please input your Password!">
23-
<nz-input-group nzPrefixIcon="lock">
24-
<input type="password" nz-input formControlName="password" placeholder="Password" />
25-
</nz-input-group>
24+
<nz-input-password>
25+
<nz-icon nzInputPrefix nzType="lock" />
26+
<input nz-input formControlName="password" placeholder="Password" />
27+
</nz-input-password>
2628
</nz-form-control>
2729
</nz-form-item>
2830
<div nz-row class="login-form-margin">

‎components/form/demo/register.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,15 +68,13 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
6868
[nzValidateStatus]="validateForm.controls['phoneNumber']"
6969
nzErrorTip="Please input your phone number!"
7070
>
71-
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
72-
<ng-template #addOnBeforeTemplate>
73-
<nz-select formControlName="phoneNumberPrefix" class="phone-select">
74-
<nz-option nzLabel="+86" nzValue="+86"></nz-option>
75-
<nz-option nzLabel="+87" nzValue="+87"></nz-option>
76-
</nz-select>
77-
</ng-template>
71+
<nz-input-wrapper>
72+
<nz-select nzInputAddonBefore formControlName="phoneNumberPrefix" class="phone-select">
73+
<nz-option nzLabel="+86" nzValue="+86"></nz-option>
74+
<nz-option nzLabel="+87" nzValue="+87"></nz-option>
75+
</nz-select>
7876
<input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
79-
</nz-input-group>
77+
</nz-input-wrapper>
8078
</nz-form-control>
8179
</nz-form-item>
8280
<nz-form-item>

‎components/icon/page/index.ts‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -365,16 +365,14 @@ declare const locale: NzSafeAny;
365365
Two Tone
366366
</label>
367367
</nz-radio-group>
368-
<nz-input-group nzSearch [nzSuffix]="suffixIconCamera" [nzAddOnAfter]="addOnAfterIconSearch">
368+
<nz-input-search>
369369
<input
370370
nz-input
371371
[placeholder]="localeObj.search"
372372
[(ngModel)]="searchingString"
373373
(ngModelChange)="onSearchChange()"
374374
/>
375-
</nz-input-group>
376-
<ng-template #suffixIconCamera>
377-
<div class="icon-pic-searcher">
375+
<div nzInputSuffix class="icon-pic-searcher">
378376
<nz-icon
379377
class="icon-pic-btn"
380378
nz-popover
@@ -390,12 +388,7 @@ declare const locale: NzSafeAny;
390388
</svg>
391389
</nz-icon>
392390
</div>
393-
</ng-template>
394-
<ng-template #addOnAfterIconSearch>
395-
<button nz-button nzType="default" nzSearch>
396-
<nz-icon nzType="search"></nz-icon>
397-
</button>
398-
</ng-template>
391+
</nz-input-search>
399392
</div>
400393
@for (category of categoryNames; track category; let i = $index) {
401394
<h3>{{ localeObj[category] }}</h3>
@@ -504,7 +497,7 @@ declare const locale: NzSafeAny;
504497
justify-content: space-between;
505498
}
506499
507-
nz-input-group {
500+
nz-input-search {
508501
margin-left: 10px;
509502
flex: 1 1 0;
510503
}

‎components/input/input.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,9 +255,10 @@ describe('input', () => {
255255
template: `
256256
<div [dir]="dir">
257257
<input nz-input />
258-
<nz-input-group nzAddOnAfterIcon="setting">
258+
<nz-input-wrapper>
259259
<input type="text" nz-input />
260-
</nz-input-group>
260+
<nz-icon nzInputAddonAfter nzType="setting" />
261+
</nz-input-wrapper>
261262
</div>
262263
`
263264
})

0 commit comments

Comments
 (0)