Skip to content

Commit f8fedfc

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:flex): add flex component (#8145)
1 parent 0902a4b commit f8fedfc

28 files changed

+792
-0
lines changed

‎.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ components/cron-expression/** @OriginRing
7272
components/water-mark/** @OriginRing
7373
components/color-picker/** @OriginRing
7474
components/hash-code/** @OriginRing
75+
components/flex/** @ParsaArvanehPA
7576

7677
# The `components/core/*` owners
7778
components/core/config/** @hullis

‎components/components.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import './dropdown/style/entry.less';
2020
@import './empty/style/entry.less';
2121
@import './grid/style/entry.less';
22+
@import './flex/style/entry.less';
2223
@import './input/style/entry.less';
2324
@import './input-number/style/entry.less';
2425
@import './layout/style/entry.less';

‎components/flex/demo/align.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 1
3+
title:
4+
zh-CN: 对齐方式
5+
en-US: Align
6+
---
7+
8+
## zh-CN
9+
10+
设置对齐方式。
11+
12+
## en-US
13+
14+
Set align.

‎components/flex/demo/align.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzAlign, NzJustify } from 'ng-zorro-antd/flex';
4+
5+
@Component({
6+
selector: 'nz-demo-flex-align',
7+
template: `
8+
<div class="segment-wrapper">
9+
<span>Select justify:</span>
10+
<nz-segmented [nzOptions]="justifySegment" [(ngModel)]="selectedJustification"></nz-segmented>
11+
</div>
12+
13+
<div class="segment-wrapper">
14+
<span>Select align:</span>
15+
<nz-segmented [nzOptions]="alignSegment" [(ngModel)]="selectedLAlignment"></nz-segmented>
16+
</div>
17+
18+
<div
19+
class="btn-wrappers"
20+
nz-flex
21+
[nzJustify]="justifySegment[selectedJustification]"
22+
[nzAlign]="alignSegment[selectedLAlignment]"
23+
>
24+
<button nz-button nzType="primary">Primary</button>
25+
<button nz-button nzType="primary">Primary</button>
26+
<button nz-button nzType="primary">Primary</button>
27+
<button nz-button nzType="primary">Primary</button>
28+
</div>
29+
`,
30+
styles: [
31+
`
32+
.segment-wrapper {
33+
display: flex;
34+
align-items: center;
35+
gap: 1rem;
36+
37+
margin-block-end: 1rem;
38+
}
39+
40+
.btn-wrappers {
41+
block-size: 10rem;
42+
border: 1px solid var(--ant-primary-6);
43+
}
44+
`
45+
]
46+
})
47+
export class NzDemoFlexAlignComponent {
48+
public justifySegment: NzJustify[] = [
49+
'flex-start',
50+
'center',
51+
'flex-end',
52+
'space-between',
53+
'space-around',
54+
'space-evenly'
55+
];
56+
public alignSegment: NzAlign[] = ['flex-start', 'center', 'flex-end'];
57+
public selectedJustification = 0;
58+
public selectedLAlignment = 0;
59+
}

‎components/flex/demo/basic.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 基本布局
5+
en-US: Basic
6+
---
7+
8+
## zh-CN
9+
10+
最简单的用法。
11+
12+
## en-US
13+
14+
The basic usage.

‎components/flex/demo/basic.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-flex-basic',
5+
template: `
6+
<nz-radio-group [(ngModel)]="isVertical">
7+
<label nz-radio [nzValue]="false">horizontal</label>
8+
<label nz-radio [nzValue]="true">vertical</label>
9+
</nz-radio-group>
10+
11+
<div nz-flex [nzVertical]="isVertical">
12+
<div class="flex-item"></div>
13+
<div class="flex-item even"></div>
14+
<div class="flex-item"></div>
15+
<div class="flex-item even"></div>
16+
</div>
17+
`,
18+
19+
styles: [
20+
`
21+
nz-radio-group {
22+
margin-block-end: 1rem;
23+
}
24+
25+
.flex-item {
26+
inline-size: 25%;
27+
block-size: 54px;
28+
background-color: var(--ant-primary-6);
29+
}
30+
31+
.even {
32+
background-color: var(--ant-primary-5);
33+
}
34+
`
35+
]
36+
})
37+
export class NzDemoFlexBasicComponent {
38+
isVertical = false;
39+
}

‎components/flex/demo/combination.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 组合使用
5+
en-US: Combination
6+
---
7+
8+
## zh-CN
9+
10+
嵌套使用，可以实现更复杂的布局。
11+
12+
## en-US
13+
14+
Nesting can achieve more complex layouts.

‎components/flex/demo/combination.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'nz-demo-flex-combination',
5+
template: `
6+
<div class="combination-wrapper" nz-flex [nzGap]="80">
7+
<img
8+
alt="Angular"
9+
width="150"
10+
height="150"
11+
src="https://img.alicdn.com/tfs/TB1g.mWZAL0gK0jSZFtXXXQCXXa-200-200.svg"
12+
/>
13+
14+
<div nz-flex [nzVertical]="true" [nzGap]="'large'">
15+
<h2> Ant Design of Angular </h2>
16+
17+
<h3>
18+
An enterprise-class Angular UI component library based on Ant Design, all components are open source and free
19+
to use under MIT license.
20+
</h3>
21+
</div>
22+
</div>
23+
`,
24+
styles: [
25+
`
26+
.combination-wrapper {
27+
inline-size: 40rem;
28+
padding: 2rem;
29+
border: 1px solid #f0f0f0;
30+
border-radius: 2px;
31+
}
32+
`
33+
]
34+
})
35+
export class NzDemoFlexCombinationComponent {}

‎components/flex/demo/gap.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 设置间隙
5+
en-US: Gap
6+
---
7+
8+
## zh-CN
9+
10+
使用 `gap` 设置元素之间的间距，预设了 `small`、`middle`、`large` 三种尺寸，也可以自定义间距。
11+
12+
## en-US
13+
14+
Set the `gap` between elements, which has three preset sizes: `small`, `middle`, `large`, You can also customize the gap size.

‎components/flex/demo/gap.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-flex-gap',
5+
template: `
6+
<div class="segment-wrapper">
7+
<span>Select gap:</span>
8+
<nz-segmented [nzOptions]="gapSegment" [(ngModel)]="selectedGap"></nz-segmented>
9+
</div>
10+
<ng-container *ngIf="gapSegment[selectedGap] === 'custom'">
11+
<nz-slider [nzMin]="0" [nzMax]="100" [(ngModel)]="customGapValue"></nz-slider>
12+
</ng-container>
13+
<div
14+
nz-flex
15+
[nzGap]="
16+
selectedGap === 0 ? 'small' : selectedGap === 1 ? 'middle' : selectedGap === 2 ? 'large' : customGapValue
17+
"
18+
>
19+
<button nz-button nzType="primary">Primary</button>
20+
<button nz-button nzType="dashed">Dashed</button>
21+
<button nz-button nzType="default">Default</button>
22+
<button nz-button nzType="link">Link</button>
23+
</div>
24+
`,
25+
styles: [
26+
`
27+
.segment-wrapper {
28+
display: flex;
29+
align-items: center;
30+
gap: 1rem;
31+
32+
margin-block-end: 1rem;
33+
}
34+
`
35+
]
36+
})
37+
export class NzDemoFlexGapComponent {
38+
public gapSegment: string[] = ['small', 'middle', 'large', 'custom'];
39+
public selectedGap = 0;
40+
public customGapValue = 0;
41+
}

‎components/flex/demo/module

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NzFlexModule } from 'ng-zorro-antd/flex';
2+
import { NzSegmentedModule } from 'ng-zorro-antd/segmented';
3+
import { NzButtonModule } from 'ng-zorro-antd/button';
4+
import { NzSliderModule } from 'ng-zorro-antd/slider';
5+
import { NzRadioModule } from 'ng-zorro-antd/radio';
6+
import { CommonModule } from '@angular/common';
7+
8+
export const moduleList = [
9+
NzFlexModule,
10+
NzSegmentedModule,
11+
NzButtonModule,
12+
NzSliderModule,
13+
NzRadioModule,
14+
CommonModule
15+
];

‎components/flex/demo/wrap.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 自动换行
5+
en-US: Wrap
6+
---
7+
8+
## zh-CN
9+
10+
自动换行。
11+
12+
## en-US
13+
14+
Wrap line.

‎components/flex/demo/wrap.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Component } from '@angular/core';
2+
3+
import { NzWrap } from 'ng-zorro-antd/flex';
4+
5+
@Component({
6+
selector: 'nz-demo-flex-wrap',
7+
template: `
8+
<div class="segment-wrapper">
9+
<span>Select wrap:</span>
10+
<nz-segmented [nzOptions]="wrapSegment" [(ngModel)]="selectedWrap"></nz-segmented>
11+
</div>
12+
<div class="btn-wrapper" nz-flex [nzGap]="'middle'" [nzWrap]="wrapSegment[selectedWrap]">
13+
<ng-container *ngFor="let _ of [].constructor(20); let index = index">
14+
<button style="width: 100px" nz-button nzType="primary">Button {{ index + 1 }}</button>
15+
</ng-container>
16+
</div>
17+
`,
18+
styles: [
19+
`
20+
.segment-wrapper {
21+
display: flex;
22+
align-items: center;
23+
gap: 1rem;
24+
25+
margin-block-end: 1rem;
26+
}
27+
28+
.btn-wrapper {
29+
overflow: auto;
30+
padding-block: 10px;
31+
}
32+
`
33+
]
34+
})
35+
export class NzDemoFlexWrapComponent {
36+
public wrapSegment: NzWrap[] = ['wrap', 'wrap-reverse', 'nowrap'];
37+
public selectedWrap = 0;
38+
}

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
category: Components
3+
type: Layout
4+
cols: 1
5+
title: Flex
6+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
7+
tag: New
8+
---
9+
10+
Wrapper for `Display: flex`.
11+
12+
## When To Use
13+
14+
- Good for setting spacing between elements.
15+
- Suitable for setting various horizontal and vertical alignments.
16+
17+
### Difference with Space component
18+
19+
- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
20+
- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.
21+
22+
### Import Module
23+
24+
```ts
25+
import { NzFlexModule } from 'ng-zorro-antd/flex';
26+
```
27+
28+
## API
29+
30+
### [nz-flex]:standalone
31+
32+
| Property | Description | Type | Default |
33+
| -------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ---------- |
34+
| `[nzVertical]` | Is direction of the flex vertical, use `flex-direction: column` | `boolean` | `false` |
35+
| `[nzJustify]` | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `'normal'` |
36+
| `[nzAlign]` | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | `'normal'` |
37+
| `[nzGap]` | Sets the gap between items | `'small' \| 'middle' \| 'large' \| number \| string` | `0` |
38+
| `[nzWrap]` | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | `'nowrap'` |
39+
| `[nzFlex]` | Flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | `'unset'` |

0 commit comments

Comments
 (0)