Skip to content

Commit af6f590

Browse files
HyperLife1119HyperLife1119
authored
feat(module:input): introduce nz-input-search directive (#9483)
1 parent 12beec7 commit af6f590

22 files changed

+383
-58
lines changed

‎components/input/demo/allow-clear.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 12
2+
order: 13
33
version: 20.4.0
44
title:
55
zh-CN: 带移除图标

‎components/input/demo/autosize-textarea.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 7
2+
order: 8
33
title:
44
zh-CN: 适应文本高度的文本域
55
en-US: Autosizing the height to fit the content

‎components/input/demo/compact.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,10 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
2323
<br />
2424
<br />
2525
<nz-space-compact>
26-
<nz-input-wrapper class="ant-input-search">
26+
<nz-input-search>
2727
<span nzInputAddonBefore>https://</span>
28-
<input nz-input type="search" placeholder="input search text" />
29-
<button nzInputAddonAfter nz-button class="ant-input-search-button">
30-
<nz-icon nzType="search" />
31-
</button>
32-
</nz-input-wrapper>
28+
<input nz-input placeholder="input search text" />
29+
</nz-input-search>
3330
</nz-space-compact>
3431
<br />
3532
<br />

‎components/input/demo/otp.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 8
2+
order: 9
33
title:
44
zh-CN: 一次性密码框
55
en-US: OTP

‎components/input/demo/password-input.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 11
2+
order: 12
33
version: 20.4.0
44
title:
55
zh-CN: 密码框

‎components/input/demo/presuffix.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 10
2+
order: 11
33
title:
44
zh-CN: 前缀和后缀
55
en-US: prefix and suffix

‎components/input/demo/search-input-loading.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 6
3+
version: 20.4.0
4+
title:
5+
zh-CN: 搜索框 loading
6+
en-US: Search box with loading
7+
---
8+
9+
## zh-CN
10+
11+
用于 `nzSearch` 的时候展示 `loading`。
12+
13+
## en-US
14+
15+
Search loading when onSearch.

‎components/input/demo/search-input-loading.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzInputModule } from 'ng-zorro-antd/input';
4+
5+
@Component({
6+
selector: 'nz-demo-input-search-input-loading',
7+
imports: [NzInputModule],
8+
template: `
9+
<nz-input-search nzLoading>
10+
<input nz-input placeholder="input search loading default" />
11+
</nz-input-search>
12+
<br />
13+
<br />
14+
<nz-input-search nzLoading nzEnterButton>
15+
<input nz-input placeholder="input search loading with enterButton" />
16+
</nz-input-search>
17+
<br />
18+
<br />
19+
<nz-input-search nzLoading nzEnterButton="Search">
20+
<input nz-input placeholder="input search text" nzSize="large" />
21+
</nz-input-search>
22+
`
23+
})
24+
export class NzDemoInputSearchInputLoadingComponent {}

‎components/input/demo/search-input.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
order: 5
3+
version: 20.4.0
34
title:
45
zh-CN: 搜索框
56
en-US: Search box

‎components/input/demo/search-input.ts‎

Lines changed: 25 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,50 @@
11
import { Component, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33

4-
import { NzButtonModule } from 'ng-zorro-antd/button';
54
import { NzIconModule } from 'ng-zorro-antd/icon';
6-
import { NzInputModule } from 'ng-zorro-antd/input';
5+
import { NzInputModule, NzInputSearchEvent } from 'ng-zorro-antd/input';
76

87
@Component({
98
selector: 'nz-demo-input-search-input',
10-
imports: [FormsModule, NzButtonModule, NzInputModule, NzIconModule],
9+
imports: [FormsModule, NzInputModule, NzIconModule],
1110
template: `
12-
<nz-input-wrapper class="ant-input-search">
13-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" />
14-
<button nzInputAddonAfter nz-button class="ant-input-search-button">
15-
<nz-icon nzType="search" />
16-
</button>
17-
</nz-input-wrapper>
11+
<nz-input-search (nzSearch)="onSearch($event)">
12+
<input nz-input [(ngModel)]="value" placeholder="input search text" />
13+
</nz-input-search>
1814
<br />
1915
<br />
20-
<nz-input-wrapper nzAllowClear class="ant-input-search">
21-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" />
22-
<button nzInputAddonAfter nz-button class="ant-input-search-button">
23-
<nz-icon nzType="search" />
24-
</button>
25-
</nz-input-wrapper>
16+
<nz-input-search nzAllowClear (nzSearch)="onSearch($event)">
17+
<input nz-input [(ngModel)]="value" placeholder="input search text" />
18+
</nz-input-search>
2619
<br />
2720
<br />
28-
<nz-input-wrapper class="ant-input-search">
21+
<nz-input-search (nzSearch)="onSearch($event)">
2922
<span nzInputAddonBefore>https://</span>
30-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" />
31-
<button nzInputAddonAfter nz-button class="ant-input-search-button">
32-
<nz-icon nzType="search" />
33-
</button>
34-
</nz-input-wrapper>
23+
<input nz-input [(ngModel)]="value" placeholder="input search text" />
24+
</nz-input-search>
3525
<br />
3626
<br />
37-
<nz-input-wrapper class="ant-input-search ant-input-search-with-button">
38-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" />
39-
<button nzInputAddonAfter nz-button nzType="primary" class="ant-input-search-button">
40-
<nz-icon nzType="search" />
41-
</button>
42-
</nz-input-wrapper>
27+
<nz-input-search nzEnterButton="Submit" (nzSearch)="onSearch($event)">
28+
<input nz-input [(ngModel)]="value" placeholder="input search text" />
29+
</nz-input-search>
4330
<br />
4431
<br />
45-
<nz-input-wrapper class="ant-input-search ant-input-search-large ant-input-search-with-button">
46-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" nzSize="large" />
47-
<button nzInputAddonAfter nz-button nzType="primary" nzSize="large" class="ant-input-search-button"
48-
>Submit</button
49-
>
50-
</nz-input-wrapper>
32+
<nz-input-search nzEnterButton="Submit" (nzSearch)="onSearch($event)">
33+
<input nz-input [(ngModel)]="value" placeholder="input search text" nzSize="large" />
34+
</nz-input-search>
5135
<br />
5236
<br />
53-
<nz-input-wrapper class="ant-input-search ant-input-search-large ant-input-search-with-button">
54-
<input nz-input [(ngModel)]="value" type="search" placeholder="input search text" nzSize="large" />
37+
<nz-input-search (nzSearch)="onSearch($event)">
38+
<input nz-input [(ngModel)]="value" placeholder="input search text" nzSize="large" />
5539
<nz-icon nzInputSuffix nzType="audio" [style.font-size.px]="16" [style.color]="'#1677ff'" />
56-
<button nzInputAddonAfter nz-button nzType="primary" nzSize="large" class="ant-input-search-button">
57-
Submit
58-
</button>
59-
</nz-input-wrapper>
40+
<span nzInputSearchEnterButton>Custom</span>
41+
</nz-input-search>
6042
`
6143
})
6244
export class NzDemoInputSearchInputComponent {
6345
readonly value = signal('');
46+
47+
onSearch(event: NzInputSearchEvent): void {
48+
console.log(event);
49+
}
6450
}

0 commit comments

Comments
 (0)