Skip to content

Commit 208652c

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:grid): support standalone component (#8250)
1 parent a91cac7 commit 208652c

File tree

5 files changed

+54
-57
lines changed

5 files changed

+54
-57
lines changed

‎components/grid/col.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export interface EmbeddedProperty {
3838
exportAs: 'nzCol',
3939
host: {
4040
'[style.flex]': 'hostFlexStyle'
41-
}
41+
},
42+
standalone: true
4243
})
4344
export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
4445
private classMap: { [key: string]: boolean } = {};

‎components/grid/doc/index.en-US.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -84,29 +84,29 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
8484

8585
## API
8686

87-
### [nz-row]
88-
89-
| Property | Description | Type | Default |
90-
| -------- | ----------- | ---- | ------- |
91-
| `[nzAlign]` | the vertical alignment | `'top'\|'middle'\|'bottom'` | - |
92-
| `[nzGutter]` | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | `string\|number\|object\|[number, number]\|[object, object]` | `0` |
93-
| `[nzJustify]` | horizontal arrangement | `'start'\|'end'\|'center'\|'space-around'\|'space-between'` | - |
94-
95-
### [nz-col]
96-
97-
| Property | Description | Type | Default |
98-
| -------- | ----------- | ---- | ------- |
99-
| `[nzFlex]` | flex layout style | `string \| number` | - |
100-
| `[nzOffset]` | the number of cells to offset Col from the left | `number` | `0` |
101-
| `[nzOrder]` | raster order | `number` | `0` |
102-
| `[nzPull]` | the number of cells that raster is moved to the left | `number` | `0` |
103-
| `[nzPush]` | the number of cells that raster is moved to the right | `number` | `0` |
104-
| `[nzSpan]` | raster number of cells to occupy, 0 corresponds to `display: none` | `number` | - |
105-
| `[nzXs]` | `<576px` and also default setting, could be a `span` value or an object containing above props | `number \| object` | - |
106-
| `[nzSm]` | `≥576px`, could be a `span` value or an object containing above props | `number \| object` | - |
107-
| `[nzMd]` | `≥768px`, could be a `span` value or an object containing above props | `number \| object` | - |
108-
| `[nzLg]` | `≥992px`, could be a `span` value or an object containing above props | `number \| object` | - |
109-
| `[nzXl]` | `≥1200px`, could be a `span` value or an object containing above props | `number \| object` | - |
110-
| `[nzXXl]` | `≥1600px`, could be a `span` value or an object containing above props | `number \| object` | - |
87+
### [nz-row]:standalone
88+
89+
| Property | Description | Type | Default |
90+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------- |
91+
| `[nzAlign]` | the vertical alignment | `'top'\|'middle'\|'bottom'` | - |
92+
| `[nzGutter]` | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | `string\|number\|object\|[number, number]\|[object, object]` | `0` |
93+
| `[nzJustify]` | horizontal arrangement | `'start'\|'end'\|'center'\|'space-around'\|'space-between'` | - |
94+
95+
### [nz-col]:standalone
96+
97+
| Property | Description | Type | Default |
98+
| ------------ | ---------------------------------------------------------------------------------------------- | ------------------ | ------- |
99+
| `[nzFlex]` | flex layout style | `string \| number` | - |
100+
| `[nzOffset]` | the number of cells to offset Col from the left | `number` | `0` |
101+
| `[nzOrder]` | raster order | `number` | `0` |
102+
| `[nzPull]` | the number of cells that raster is moved to the left | `number` | `0` |
103+
| `[nzPush]` | the number of cells that raster is moved to the right | `number` | `0` |
104+
| `[nzSpan]` | raster number of cells to occupy, 0 corresponds to `display: none` | `number` | - |
105+
| `[nzXs]` | `<576px` and also default setting, could be a `span` value or an object containing above props | `number \| object` | - |
106+
| `[nzSm]` | `≥576px`, could be a `span` value or an object containing above props | `number \| object` | - |
107+
| `[nzMd]` | `≥768px`, could be a `span` value or an object containing above props | `number \| object` | - |
108+
| `[nzLg]` | `≥992px`, could be a `span` value or an object containing above props | `number \| object` | - |
109+
| `[nzXl]` | `≥1200px`, could be a `span` value or an object containing above props | `number \| object` | - |
110+
| `[nzXXl]` | `≥1600px`, could be a `span` value or an object containing above props | `number \| object` | - |
111111

112112
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).

‎components/grid/doc/index.zh-CN.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -83,29 +83,29 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
8383

8484
## API
8585

86-
### [nz-row]
87-
88-
| 成员 | 说明 | 类型 | 默认值 |
89-
| --- | --- | --- | --- |
90-
| `[nzAlign]` | 垂直对齐方式 | `'top' \| 'middle' \| 'bottom'` | - |
91-
| `[nzGutter]` | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | `string\|number\|object\|[number, number]\|[object, object]` | - |
92-
| `[nzJustify]` | 水平排列方式 | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | - |
93-
94-
### [nz-col]
95-
96-
| 成员 | 说明 | 类型 | 默认值 |
97-
| --- | --- | --- | --- |
98-
| `[nzFlex]` | flex 布局属性 | `string \| number` | - |
99-
| `[nzOffset]` | 栅格左侧的间隔格数，间隔内不可以有栅格 | `number` | - |
100-
| `[nzOrder]` | 栅格顺序 | `number` | - |
101-
| `[nzPull]` | 栅格向左移动格数 | `number` | - |
102-
| `[nzPush]` | 栅格向右移动格数 | `number` | - |
103-
| `[nzSpan]` | 栅格占位格数，为 0 时相当于 `display: none` | `number` | - |
104-
| `[nzXs]` | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
105-
| `[nzSm]` | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
106-
| `[nzMd]` | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
107-
| `[nzLg]` | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
108-
| `[nzXl]` | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
109-
| `[nzXXl]` | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
86+
### [nz-row]:standalone
87+
88+
| 成员 | 说明 | 类型 | 默认值 |
89+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | ------ |
90+
| `[nzAlign]` | 垂直对齐方式 | `'top' \| 'middle' \| 'bottom'` | - |
91+
| `[nzGutter]` | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | `string\|number\|object\|[number, number]\|[object, object]` | - |
92+
| `[nzJustify]` | 水平排列方式 | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | - |
93+
94+
### [nz-col]:standalone
95+
96+
| 成员 | 说明 | 类型 | 默认值 |
97+
| ------------ | -------------------------------------------------------- | ------------------ | ------ |
98+
| `[nzFlex]` | flex 布局属性 | `string \| number` | - |
99+
| `[nzOffset]` | 栅格左侧的间隔格数，间隔内不可以有栅格 | `number` | - |
100+
| `[nzOrder]` | 栅格顺序 | `number` | - |
101+
| `[nzPull]` | 栅格向左移动格数 | `number` | - |
102+
| `[nzPush]` | 栅格向右移动格数 | `number` | - |
103+
| `[nzSpan]` | 栅格占位格数，为 0 时相当于 `display: none` | `number` | - |
104+
| `[nzXs]` | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
105+
| `[nzSm]` | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
106+
| `[nzMd]` | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
107+
| `[nzLg]` | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
108+
| `[nzXl]` | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
109+
| `[nzXXl]` | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
110110

111111
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

‎components/grid/grid.module.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,13 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { LayoutModule } from '@angular/cdk/layout';
8-
import { PlatformModule } from '@angular/cdk/platform';
9-
import { CommonModule } from '@angular/common';
106
import { NgModule } from '@angular/core';
117

128
import { NzColDirective } from './col.directive';
139
import { NzRowDirective } from './row.directive';
1410

1511
@NgModule({
16-
declarations: [NzColDirective, NzRowDirective],
17-
exports: [NzColDirective, NzRowDirective],
18-
imports: [BidiModule, CommonModule, LayoutModule, PlatformModule]
12+
imports: [NzColDirective, NzRowDirective],
13+
exports: [NzColDirective, NzRowDirective]
1914
})
2015
export class NzGridModule {}

‎components/grid/row.directive.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export type NzAlign = 'top' | 'middle' | 'bottom';
4343
'[class.ant-row-space-between]': `nzJustify === 'space-between'`,
4444
'[class.ant-row-space-evenly]': `nzJustify === 'space-evenly'`,
4545
'[class.ant-row-rtl]': `dir === "rtl"`
46-
}
46+
},
47+
standalone: true
4748
})
4849
export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
4950
@Input() nzAlign: NzAlign | null = null;

0 commit comments

Comments
 (0)