Skip to content

Commit 9a37ef8

Browse files
LafferyLaffery
authored
fix(module:layout): fix showcases (#9303)
1 parent 91b1ad7 commit 9a37ef8

12 files changed

Lines changed: 55 additions & 40 deletions

File tree

‎components/layout/demo/basic.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,3 @@ title:
1212
## en-US
1313

1414
Classic page layouts.
15-
16-
17-

‎components/layout/demo/basic.ts‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,39 +42,45 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
4242
styles: [
4343
`
4444
:host {
45+
display: flex;
46+
flex-wrap: wrap;
47+
gap: 16px;
4548
text-align: center;
4649
}
4750
4851
nz-header,
4952
nz-footer {
50-
background: #7dbcea;
53+
text-align: center;
54+
background: #4096ff;
5155
color: #fff;
5256
}
5357
54-
nz-footer {
55-
line-height: 1.5;
58+
nz-header {
59+
height: 64px;
60+
padding-inline: 48px;
61+
line-height: 64px;
5662
}
5763
5864
nz-sider {
59-
background: #3ba0e9;
65+
text-align: center;
66+
background: #1677ff;
6067
color: #fff;
6168
line-height: 120px;
6269
}
6370
6471
nz-content {
65-
background: rgba(16, 142, 233, 1);
72+
text-align: center;
73+
background: #0958d9;
6674
color: #fff;
6775
min-height: 120px;
6876
line-height: 120px;
6977
}
7078
71-
nz-layout {
72-
margin-bottom: 48px;
73-
}
74-
75-
nz-layout nz-layout,
76-
nz-layout:last-child {
77-
margin: 0;
79+
:host > nz-layout {
80+
width: calc(50% - 8px);
81+
max-width: calc(50% - 8px);
82+
border-radius: 8px;
83+
overflow: hidden;
7884
}
7985
`
8086
]

‎components/layout/demo/custom-trigger.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
4747
</nz-breadcrumb>
4848
<div class="inner-content">Bill is a cat.</div>
4949
</nz-content>
50-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
50+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
5151
</nz-layout>
5252
</nz-layout>
5353
`,
@@ -98,4 +98,5 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
9898
})
9999
export class NzDemoLayoutCustomTriggerComponent {
100100
isCollapsed = false;
101+
protected readonly date = new Date();
101102
}

‎components/layout/demo/fixed-sider.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
147147
content
148148
</div>
149149
</nz-content>
150-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
150+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
151151
</nz-layout>
152152
</nz-layout>
153153
`,
@@ -196,4 +196,6 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
196196
`
197197
]
198198
})
199-
export class NzDemoLayoutFixedSiderComponent {}
199+
export class NzDemoLayoutFixedSiderComponent {
200+
protected readonly date = new Date();
201+
}

‎components/layout/demo/fixed.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
2525
</nz-breadcrumb>
2626
<div class="inner-content">Content</div>
2727
</nz-content>
28-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
28+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
2929
</nz-layout>
3030
`,
3131
styles: [
@@ -72,4 +72,6 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
7272
`
7373
]
7474
})
75-
export class NzDemoLayoutFixedComponent {}
75+
export class NzDemoLayoutFixedComponent {
76+
protected readonly date = new Date();
77+
}

‎components/layout/demo/responsive.ts‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
88
selector: 'nz-demo-layout-responsive',
99
imports: [NzIconModule, NzMenuModule, NzLayoutModule],
1010
template: `
11-
<nz-layout class="layout">
11+
<nz-layout>
1212
<nz-sider nzCollapsible nzBreakpoint="lg" [nzCollapsedWidth]="0">
1313
<div class="logo"></div>
1414
<ul nz-menu nzTheme="dark" nzMode="inline">
@@ -35,16 +35,12 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
3535
<nz-content>
3636
<div class="inner-content">Content</div>
3737
</nz-content>
38-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
38+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
3939
</nz-layout>
4040
</nz-layout>
4141
`,
4242
styles: [
4343
`
44-
.layout {
45-
min-height: 100vh;
46-
}
47-
4844
.logo {
4945
height: 32px;
5046
background: rgba(255, 255, 255, 0.2);
@@ -72,4 +68,6 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
7268
`
7369
]
7470
})
75-
export class NzDemoLayoutResponsiveComponent {}
71+
export class NzDemoLayoutResponsiveComponent {
72+
protected readonly date = new Date();
73+
}

‎components/layout/demo/side.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
4949
</nz-breadcrumb>
5050
<div class="inner-content">Bill is a cat.</div>
5151
</nz-content>
52-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
52+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
5353
</nz-layout>
5454
</nz-layout>
5555
`,
@@ -78,12 +78,19 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
7878
padding: 24px;
7979
background: #fff;
8080
min-height: 360px;
81+
border-radius: 8px;
8182
}
8283
8384
nz-footer {
8485
text-align: center;
8586
}
87+
88+
:host > nz-layout {
89+
min-height: 100vh;
90+
}
8691
`
8792
]
8893
})
89-
export class NzDemoLayoutSideComponent {}
94+
export class NzDemoLayoutSideComponent {
95+
protected readonly date = new Date();
96+
}

‎components/layout/demo/top-side-2.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 2
2+
order: 3
33
title:
44
zh-CN: 顶部-侧边布局-通栏
55
en-US: Header Sider 2
@@ -12,5 +12,3 @@ title:
1212
## en-US
1313

1414
Both the top navigation and the sidebar, commonly used in application site.
15-
16-

‎components/layout/demo/top-side.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 3
2+
order: 2
33
title:
44
zh-CN: 顶部-侧边布局
55
en-US: Header-Sider
@@ -12,4 +12,3 @@ title:
1212
## en-US
1313

1414
Both the top navigation and the sidebar, commonly used in documentation site.
15-

‎components/layout/demo/top-side.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
5555
</nz-sider>
5656
<nz-content class="inner-content">Content</nz-content>
5757
</nz-layout>
58-
<nz-footer>Ant Design ©2020 Implement By Angular</nz-footer>
58+
<nz-footer>Ant Design ©{{ date.getFullYear() }} Implement By Angular</nz-footer>
5959
</nz-content>
6060
</nz-layout>
6161
`,
@@ -101,4 +101,6 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
101101
`
102102
]
103103
})
104-
export class NzDemoLayoutTopSideComponent {}
104+
export class NzDemoLayoutTopSideComponent {
105+
protected readonly date = new Date();
106+
}

0 commit comments

Comments
 (0)