Skip to content

Commit b038fa2

Browse files
simplejasonsimplejason
authored
feat(module:input-number): support input number group (#7488)
* feat(module:input-number): support input number group feat(module:input-number): add nzCompact * feat(module:input-number): add tests * feat(module:input-number): fix some errors * feat(module:input-number): fix demos
1 parent d28f861 commit b038fa2

18 files changed

+932
-22
lines changed

‎components/input-number/demo/addon.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 7
3+
title:
4+
zh-CN: 前置/后置标签
5+
en-US: Pre / Post tab
6+
---
7+
8+
## zh-CN
9+
10+
用于配置一些固定组合。
11+
12+
## en-US
13+
14+
Using pre & post tabs example.

‎components/input-number/demo/addon.ts‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-input-number-addon',
5+
template: `
6+
<nz-space nzDirection="vertical" style="width: 100%">
7+
<nz-input-number-group *nzSpaceItem nzAddOnBefore="+" nzAddOnAfter="$">
8+
<nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
9+
</nz-input-number-group>
10+
<nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
11+
<nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
12+
</nz-input-number-group>
13+
<ng-template #addOnBeforeTemplate>
14+
<nz-select [ngModel]="'add'" style="width: 60px">
15+
<nz-option nzLabel="+" nzValue="add"></nz-option>
16+
<nz-option nzLabel="-" nzValue="minus"></nz-option>
17+
</nz-select>
18+
</ng-template>
19+
<ng-template #addOnAfterTemplate>
20+
<nz-select [ngModel]="'USD'" style="width: 60px">
21+
<nz-option nzValue="USD" nzLabel="$"></nz-option>
22+
<nz-option nzValue="EUR" nzLabel="€"></nz-option>
23+
<nz-option nzValue="GBP" nzLabel="£"></nz-option>
24+
<nz-option nzValue="CNY" nzLabel="¥"></nz-option>
25+
</nz-select>
26+
</ng-template>
27+
<nz-input-number-group *nzSpaceItem nzAddOnAfterIcon="setting">
28+
<nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
29+
</nz-input-number-group>
30+
<nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeCascaderTemplate">
31+
<nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
32+
</nz-input-number-group>
33+
<ng-template #addOnBeforeCascaderTemplate>
34+
<nz-cascader [nzOptions]="[]" nzPlaceHolder="cascader" style="width: 150px"></nz-cascader>
35+
</ng-template>
36+
</nz-space>
37+
`
38+
})
39+
export class NzDemoInputNumberAddonComponent {
40+
demoValue = 100;
41+
}

‎components/input-number/demo/group.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
order: 9
3+
title:
4+
zh-CN: 输入框组合
5+
en-US: Input Number Group
6+
---
7+
8+
## zh-CN
9+
10+
数字输入框的组合展现。
11+
12+
注意：使用 `nzCompact` 模式时，不需要通过 `nz-col` 来控制宽度。
13+
14+
## en-US
15+
16+
InputNumber.Group example.
17+
18+
Note: You don't need `nz-col` to control the width in the `nzCompact` mode.

‎components/input-number/demo/group.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-input-number-group',
5+
template: `
6+
<nz-space nzDirection="vertical" style="width: 100%">
7+
<nz-input-number-group nz-row [nzGutter]="8" nzSize="large" *nzSpaceItem>
8+
<div nz-col nzSpan="8">
9+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number>
10+
</div>
11+
<div nz-col nzSpan="8">
12+
<nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number>
13+
</div>
14+
</nz-input-number-group>
15+
<nz-input-number-group *nzSpaceItem nzCompact>
16+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number>
17+
<nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number>
18+
</nz-input-number-group>
19+
<nz-input-number-group *nzSpaceItem nzCompact>
20+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
21+
<button nz-button nzType="primary">Submit</button>
22+
</nz-input-number-group>
23+
<nz-input-number-group *nzSpaceItem nzCompact>
24+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
25+
<button nz-button>
26+
<i nz-icon nzType="copy" nzTheme="outline"></i>
27+
</button>
28+
</nz-input-number-group>
29+
<nz-input-number-group *nzSpaceItem nzCompact>
30+
<nz-select ngModel="Zhejiang">
31+
<nz-option nzValue="Zhejiang" nzLabel="Zhejiang"></nz-option>
32+
<nz-option nzValue="Jiangsu" nzLabel="Jiangsu"></nz-option>
33+
</nz-select>
34+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
35+
</nz-input-number-group>
36+
<nz-input-number-group *nzSpaceItem nzCompact>
37+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
38+
<nz-date-picker></nz-date-picker>
39+
</nz-input-number-group>
40+
<nz-input-number-group *nzSpaceItem nzCompact>
41+
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number>
42+
<nz-range-picker></nz-range-picker>
43+
</nz-input-number-group>
44+
</nz-space>
45+
`
46+
})
47+
export class NzDemoInputNumberGroupComponent {}

‎components/input-number/demo/module‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
22
import { NzButtonModule } from 'ng-zorro-antd/button';
3+
import { NzIconModule } from 'ng-zorro-antd/icon';
4+
import { NzSpaceModule } from 'ng-zorro-antd/space';
5+
import { NzSelectModule } from 'ng-zorro-antd/select';
6+
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
7+
import { NzGridModule } from 'ng-zorro-antd/grid';
8+
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
39

4-
export const moduleList = [ NzInputNumberModule, NzButtonModule ];
10+
export const moduleList = [ NzInputNumberModule, NzButtonModule, NzIconModule, NzSpaceModule, NzSelectModule, NzCascaderModule, NzGridModule, NzDatePickerModule ];

‎components/input-number/demo/prefix.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 8
3+
title:
4+
zh-CN: 前缀
5+
en-US: Prefix
6+
---
7+
8+
## zh-CN
9+
10+
在数字输入框上添加前缀图标。
11+
12+
## en-US
13+
14+
Add a prefix inside input.

‎components/input-number/demo/prefix.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-input-number-prefix',
5+
template: `
6+
<nz-space nzDirection="vertical" style="width: 100%">
7+
<nz-input-number-group *nzSpaceItem nzPrefix="￥" style="width: 100%">
8+
<nz-input-number [nzStep]="1"></nz-input-number>
9+
</nz-input-number-group>
10+
<nz-input-number-group *nzSpaceItem nzAddOnBeforeIcon="user" nzPrefix="￥" style="width: 100%">
11+
<nz-input-number [nzStep]="1"></nz-input-number>
12+
</nz-input-number-group>
13+
<nz-input-number-group *nzSpaceItem nzPrefix="￥" style="width: 100%">
14+
<nz-input-number nzDisabled [nzStep]="1"></nz-input-number>
15+
</nz-input-number-group>
16+
</nz-space>
17+
`
18+
})
19+
export class NzDemoInputNumberPrefixComponent {}

‎components/input-number/demo/status.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import { Component } from '@angular/core';
33
@Component({
44
selector: 'nz-demo-input-number-status',
55
template: `
6-
<nz-input-number [nzStep]="1" nzStatus="error"></nz-input-number>
7-
<nz-input-number [nzStep]="1" nzStatus="warning"></nz-input-number>
8-
`,
9-
styles: [
10-
`
11-
nz-input-number {
12-
width: 100%;
13-
margin-bottom: 8px;
14-
}
15-
`
16-
]
6+
<nz-space nzDirection="vertical" style="width: 100%">
7+
<nz-input-number *nzSpaceItem [nzStep]="1" nzStatus="error" style="width: 100%"></nz-input-number>
8+
<nz-input-number *nzSpaceItem [nzStep]="1" nzStatus="warning" style="width: 100%"></nz-input-number>
9+
<nz-input-number-group *nzSpaceItem nzPrefixIcon="clock-circle" nzStatus="error" style="width: 100%">
10+
<nz-input-number [nzStep]="1"></nz-input-number>
11+
</nz-input-number-group>
12+
<nz-input-number-group *nzSpaceItem nzPrefixIcon="clock-circle" nzStatus="warning" style="width: 100%">
13+
<nz-input-number [nzStep]="1"></nz-input-number>
14+
</nz-input-number-group>
15+
</nz-space>
16+
`
1717
})
1818
export class NzDemoInputNumberStatusComponent {}

‎components/input-number/doc/index.en-US.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,20 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
4141
| `(nzFocus)` | focus callback | `EventEmitter<void>` | - |
4242
| `(nzBlur)` | blur callback | `EventEmitter<void>` | - |
4343

44+
### nz-input-number-group
45+
46+
| Property | Description | Type | Default |
47+
| -------- | ----------- | ---- | ------- |
48+
| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input number field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>` | - |
49+
| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input number field, can work with `nzAddOnAfter` | `string \| TemplateRef<void>` | - |
50+
| `[nzPrefix]` | The prefix icon for the Input Number, can work with `nzSuffix` | `string \| TemplateRef<void>` | - |
51+
| `[nzSuffix]` | The suffix icon for the Input Number, can work with `nzPrefix` | `string \| TemplateRef<void>` | - |
52+
| `[nzPrefixIcon]` | The prefix icon for the Input Number | `string` | - |
53+
| `[nzSuffixIcon]` | The suffix icon for the Input Number | `string` | - |
54+
| `[nzCompact]` | Whether use compact style | `boolean` | `false` |
55+
| `[nzSize]` | The size of `nz-input-number-group` specifies the size of the included `nz-input-number` fields | `'large' \| 'small' \| 'default'` | `'default'` |
56+
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
57+
4458
#### Methods
4559

4660
You can get instance by `ViewChild`

‎components/input-number/doc/index.zh-CN.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,20 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
4242
| `(nzFocus)` | focus时回调 | `EventEmitter<void>` | - |
4343
| `(nzBlur)` | blur时回调 | `EventEmitter<void>` | - |
4444

45+
### nz-input-number-group
46+
47+
| 参数 | 说明 | 类型 | 默认值 |
48+
| --- | --- | --- | --- |
49+
| `[nzAddOnAfter]` | 带标签的 input-number，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>` | - |
50+
| `[nzAddOnBefore]` | 带标签的 input-number，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef<void>` | - |
51+
| `[nzPrefix]` | 带有前缀图标的 input-number，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef<void>` | - |
52+
| `[nzSuffix]` | 带有后缀图标的 input-number，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef<void>` | - |
53+
| `[nzPrefixIcon]` | 带有前缀图标的 input-number | `string` | - |
54+
| `[nzSuffixIcon]` | 带有后缀图标的 input-number | `string` | - |
55+
| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` |
56+
| `[nzSize]` | `nz-input-number-group` 中所有的 `nz-input-number` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` |
57+
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
58+
4559
#### 方法
4660

4761
通过 `ViewChild` 等方法获得实例后调用

0 commit comments

Comments
 (0)