0
# Layout & Utility Components
1
2
Layout components and utilities for structuring applications including grid system, layout containers, dividers, and spacing utilities.
3
4
## Capabilities
5
6
### Grid System
7
8
Flexible grid system based on 24-column layout with responsive breakpoints.
9
10
```typescript { .api }
11
/**
12
* Row directive for grid layout
13
* Selector: [nz-row]
14
*/
15
interface NzRowDirective {
16
/** Gutter spacing between columns */
17
nzGutter: number | object | [number, number];
18
/** Layout type */
19
nzType: 'flex';
20
/** Vertical alignment */
21
nzAlign: 'top' | 'middle' | 'bottom' | 'stretch';
22
/** Horizontal alignment */
23
nzJustify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
24
/** Wrap mode */
25
nzWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
26
}
27
28
/**
29
* Column directive for grid layout
30
* Selector: [nz-col]
31
*/
32
interface NzColDirective {
33
/** Column span (0-24) */
34
nzSpan: number;
35
/** Column order */
36
nzOrder: number;
37
/** Column offset */
38
nzOffset: number;
39
/** Column push */
40
nzPush: number;
41
/** Column pull */
42
nzPull: number;
43
/** Extra small devices (<576px) */
44
nzXs: number | NzBreakPoint;
45
/** Small devices (≥576px) */
46
nzSm: number | NzBreakPoint;
47
/** Medium devices (≥768px) */
48
nzMd: number | NzBreakPoint;
49
/** Large devices (≥992px) */
50
nzLg: number | NzBreakPoint;
51
/** Extra large devices (≥1200px) */
52
nzXl: number | NzBreakPoint;
53
/** Extra extra large devices (≥1600px) */
54
nzXXl: number | NzBreakPoint;
55
/** Flex property */
56
nzFlex: string | number | 'auto' | 'none' | 'initial';
57
}
58
59
// Types
60
interface NzBreakPoint {
61
span?: number;
62
offset?: number;
63
order?: number;
64
push?: number;
65
pull?: number;
66
}
67
68
// Module
69
class NzGridModule {
70
static forRoot(): ModuleWithProviders<NzGridModule>;
71
}
72
```
73
74
**Usage Examples:**
75
76
```typescript
77
import { NzGridModule } from 'ng-zorro-antd/grid';
78
79
@Component({
80
template: `
81
<!-- Basic grid -->
82
<div nz-row>
83
<div nz-col nzSpan="12">Column 12</div>
84
<div nz-col nzSpan="12">Column 12</div>
85
</div>
86
87
<!-- With gutter -->
88
<div nz-row [nzGutter]="16">
89
<div nz-col nzSpan="6">Column 6</div>
90
<div nz-col nzSpan="6">Column 6</div>
91
<div nz-col nzSpan="6">Column 6</div>
92
<div nz-col nzSpan="6">Column 6</div>
93
</div>
94
95
<!-- Responsive grid -->
96
<div nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
97
<div nz-col [nzXs]="24" [nzSm]="12" [nzMd]="8" [nzLg]="6">
98
Responsive Column
99
</div>
100
</div>
101
102
<!-- Flex layout -->
103
<div nz-row nzType="flex" nzJustify="center" nzAlign="middle">
104
<div nz-col nzSpan="4">Centered Content</div>
105
</div>
106
`
107
})
108
export class GridExampleComponent {}
109
```
110
111
### Layout Components
112
113
Layout components for creating common page structures.
114
115
```typescript { .api }
116
/**
117
* Layout component
118
* Selector: nz-layout
119
*/
120
interface NzLayoutComponent {
121
/** Has sider */
122
nzHasSider: boolean;
123
}
124
125
/**
126
* Header component
127
* Selector: nz-header
128
*/
129
interface NzHeaderComponent {}
130
131
/**
132
* Content component
133
* Selector: nz-content
134
*/
135
interface NzContentComponent {}
136
137
/**
138
* Footer component
139
* Selector: nz-footer
140
*/
141
interface NzFooterComponent {}
142
143
/**
144
* Sider component
145
* Selector: nz-sider
146
*/
147
interface NzSiderComponent {
148
/** Collapsed state */
149
nzCollapsed: boolean;
150
/** Collapsible */
151
nzCollapsible: boolean;
152
/** Collapsed width */
153
nzCollapsedWidth: number;
154
/** Breakpoint */
155
nzBreakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
156
/** Reverse arrow direction */
157
nzReverseArrow: boolean;
158
/** Theme */
159
nzTheme: 'light' | 'dark';
160
/** Trigger */
161
nzTrigger: TemplateRef<void> | null;
162
/** Sider width */
163
nzWidth: string | number;
164
/** Zero width trigger style */
165
nzZeroTrigger: TemplateRef<void> | null;
166
/** Collapsed change event */
167
nzCollapsedChange: EventEmitter<boolean>;
168
}
169
170
// Module
171
class NzLayoutModule {
172
static forRoot(): ModuleWithProviders<NzLayoutModule>;
173
}
174
```
175
176
**Usage Examples:**
177
178
```typescript
179
import { NzLayoutModule } from 'ng-zorro-antd/layout';
180
181
@Component({
182
template: `
183
<!-- Basic layout -->
184
<nz-layout>
185
<nz-header>Header</nz-header>
186
<nz-content>Content</nz-content>
187
<nz-footer>Footer</nz-footer>
188
</nz-layout>
189
190
<!-- Layout with sider -->
191
<nz-layout>
192
<nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
193
<div class="logo"></div>
194
<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
195
<li nz-menu-item>
196
<i nz-icon nzType="pie-chart"></i>
197
<span>Option 1</span>
198
</li>
199
<li nz-menu-item>
200
<i nz-icon nzType="desktop"></i>
201
<span>Option 2</span>
202
</li>
203
</ul>
204
</nz-sider>
205
<nz-layout>
206
<nz-header style="background: #fff; padding: 0;">
207
<i
208
class="trigger"
209
nz-icon
210
[nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
211
(click)="isCollapsed = !isCollapsed">
212
</i>
213
</nz-header>
214
<nz-content style="margin: 24px 16px; padding: 24px; background: #fff; min-height: 280px;">
215
Content
216
</nz-content>
217
</nz-layout>
218
</nz-layout>
219
`
220
})
221
export class LayoutExampleComponent {
222
isCollapsed = false;
223
}
224
```
225
226
### Space Component
227
228
Space component for setting spacing between elements.
229
230
```typescript { .api }
231
/**
232
* Space component
233
* Selector: nz-space
234
*/
235
interface NzSpaceComponent {
236
/** Space direction */
237
nzDirection: 'horizontal' | 'vertical';
238
/** Space size */
239
nzSize: 'small' | 'middle' | 'large' | number | [number, number];
240
/** Wrap items */
241
nzWrap: boolean;
242
/** Alignment */
243
nzAlign: 'start' | 'end' | 'center' | 'baseline';
244
/** Split element */
245
nzSplit: TemplateRef<void>;
246
}
247
248
/**
249
* Space item directive
250
* Selector: [nzSpaceItem]
251
*/
252
interface NzSpaceItemDirective {}
253
254
/**
255
* Space compact item directive for compact layout
256
* Selector: [nzSpaceCompactItem]
257
*/
258
interface NzSpaceCompactItemDirective {}
259
260
// Module
261
class NzSpaceModule {
262
static forRoot(): ModuleWithProviders<NzSpaceModule>;
263
}
264
```
265
266
### Divider Component
267
268
Divider component for separating content sections.
269
270
```typescript { .api }
271
/**
272
* Divider component
273
* Selector: nz-divider
274
*/
275
interface NzDividerComponent {
276
/** Divider text */
277
nzText: string | TemplateRef<void>;
278
/** Divider type */
279
nzType: 'horizontal' | 'vertical';
280
/** Text orientation */
281
nzOrientation: 'left' | 'right' | 'center';
282
/** Dashed style */
283
nzDashed: boolean;
284
/** Plain text style */
285
nzPlain: boolean;
286
}
287
288
// Module
289
class NzDividerModule {
290
static forRoot(): ModuleWithProviders<NzDividerModule>;
291
}
292
```
293
294
### Typography Component
295
296
Typography component for text styling and content display.
297
298
```typescript { .api }
299
/**
300
* Typography component
301
* Selector: [nz-typography]
302
*/
303
interface NzTypographyComponent {
304
/** Editable */
305
nzEditable: boolean;
306
/** Copyable */
307
nzCopyable: boolean;
308
/** Disabled */
309
nzDisabled: boolean;
310
/** Expandable */
311
nzExpandable: boolean;
312
/** Ellipsis */
313
nzEllipsis: boolean;
314
/** Ellipsis config */
315
nzEllipsisRows: number;
316
/** Copy text */
317
nzCopyText: string;
318
/** Copy icons */
319
nzCopyIcons: [string | TemplateRef<void>, string | TemplateRef<void>];
320
/** Edit config */
321
nzEditIcon: string | TemplateRef<void>;
322
/** Edit tooltip */
323
nzEditTooltip: string | null;
324
/** Expand text */
325
nzExpandable: boolean;
326
/** Suffix for ellipsis */
327
nzSuffix: string;
328
/** Edit change event */
329
nzOnEdit: EventEmitter<string>;
330
/** Copy event */
331
nzOnCopy: EventEmitter<string>;
332
/** Expand event */
333
nzOnExpand: EventEmitter<void>;
334
/** Ellipsis change event */
335
nzOnEllipsis: EventEmitter<boolean>;
336
}
337
338
/**
339
* Text copy component
340
* Selector: nz-text-copy
341
*/
342
interface NzTextCopyComponent {
343
/** Copy text */
344
nzText: string;
345
/** Copy tooltip */
346
nzTooltips: [string, string] | null;
347
/** Copy icons */
348
nzIcons: [string | TemplateRef<void>, string | TemplateRef<void>];
349
/** Copy event */
350
nzOnCopy: EventEmitter<string>;
351
}
352
353
/**
354
* Text edit component
355
* Selector: nz-text-edit
356
*/
357
interface NzTextEditComponent {
358
/** Edit text */
359
nzText: string;
360
/** Edit icon */
361
nzIcon: string | TemplateRef<void>;
362
/** Edit tooltip */
363
nzTooltip: string | null;
364
/** Edit change event */
365
nzOnStart: EventEmitter<void>;
366
/** Edit end event */
367
nzOnEnd: EventEmitter<string>;
368
}
369
370
// Module
371
class NzTypographyModule {
372
static forRoot(): ModuleWithProviders<NzTypographyModule>;
373
}
374
```
375
376
### Flex Component
377
378
Flex utility directive for flex layout properties.
379
380
```typescript { .api }
381
/**
382
* Flex directive
383
* Selector: [nzFlex]
384
*/
385
interface NzFlexDirective {
386
/** Flex property value */
387
nzFlex: string | number | 'auto' | 'none' | 'initial';
388
/** Flex direction */
389
nzDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse';
390
/** Flex wrap */
391
nzWrap: 'nowrap' | 'wrap' | 'wrap-reverse';
392
/** Justify content */
393
nzJustify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
394
/** Align items */
395
nzAlign: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
396
/** Gap between items */
397
nzGap: number | string | [number | string, number | string];
398
/** Vertical alignment */
399
nzVertical: boolean;
400
}
401
402
// Module
403
class NzFlexModule {
404
static forRoot(): ModuleWithProviders<NzFlexModule>;
405
}
406
```
407
408
### Empty Component
409
410
Empty component for displaying empty states.
411
412
```typescript { .api }
413
/**
414
* Empty component
415
* Selector: nz-empty
416
*/
417
interface NzEmptyComponent {
418
/** Empty image */
419
nzNotFoundImage: string | TemplateRef<void>;
420
/** Empty content */
421
nzNotFoundContent: string | TemplateRef<void> | null;
422
/** Empty footer */
423
nzNotFoundFooter: string | TemplateRef<void>;
424
}
425
426
// Module
427
class NzEmptyModule {
428
static forRoot(): ModuleWithProviders<NzEmptyModule>;
429
}
430
```
431
432
### Watermark Component
433
434
Watermark component for adding watermark to content.
435
436
```typescript { .api }
437
/**
438
* Watermark component
439
* Selector: nz-watermark
440
*/
441
interface NzWaterMarkComponent {
442
/** Watermark width */
443
nzWidth: number;
444
/** Watermark height */
445
nzHeight: number;
446
/** Watermark content */
447
nzContent: string | string[];
448
/** Font configuration */
449
nzFont: {
450
color?: string;
451
fontSize?: number | string;
452
fontWeight?: 'normal' | 'light' | 'weight' | number;
453
fontFamily?: string;
454
fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
455
};
456
/** Image source */
457
nzImage: string;
458
/** Watermark rotate */
459
nzRotate: number;
460
/** Z-index */
461
nzZIndex: number;
462
/** Gap between watermarks */
463
nzGap: [number, number];
464
/** Offset from container */
465
nzOffset: [number, number];
466
}
467
468
// Module
469
class NzWaterMarkModule {
470
static forRoot(): ModuleWithProviders<NzWaterMarkModule>;
471
}
472
```
473
474
### QR Code Component
475
476
QR Code component for generating QR codes.
477
478
```typescript { .api }
479
/**
480
* QR Code component
481
* Selector: nz-qrcode
482
*/
483
interface NzQRCodeComponent {
484
/** QR code value */
485
nzValue: string;
486
/** QR code size */
487
nzSize: number;
488
/** Padding around QR code */
489
nzPadding: number | [number, number] | [number, number, number] | [number, number, number, number];
490
/** QR code color */
491
nzColor: string;
492
/** Background color */
493
nzBgColor: string;
494
/** QR code level */
495
nzLevel: 'L' | 'M' | 'Q' | 'H';
496
/** Icon configuration */
497
nzIcon: string;
498
/** Icon size */
499
nzIconSize: number;
500
/** Bordered */
501
nzBordered: boolean;
502
/** Status */
503
nzStatus: 'active' | 'expired' | 'loading' | 'scanned';
504
/** On refresh */
505
nzOnRefresh: EventEmitter<void>;
506
}
507
508
// Module
509
class NzQRCodeModule {
510
static forRoot(): ModuleWithProviders<NzQRCodeModule>;
511
}
512
```
513
514
### Float Button Component
515
516
Float button component for floating action buttons.
517
518
```typescript { .api }
519
/**
520
* Float button component
521
* Selector: nz-float-button
522
*/
523
interface NzFloatButtonComponent {
524
/** Button type */
525
nzType: 'default' | 'primary';
526
/** Button shape */
527
nzShape: 'circle' | 'square';
528
/** Button icon */
529
nzIcon: string | TemplateRef<void>;
530
/** Button description */
531
nzDescription: string | TemplateRef<void>;
532
/** Tooltip */
533
nzTooltip: string | TemplateRef<void>;
534
/** Badge */
535
nzBadge: { dot: boolean } | { count: number } | { status: string };
536
/** Button href */
537
nzHref: string;
538
/** Button target */
539
nzTarget: string;
540
/** Click event */
541
nzOnClick: EventEmitter<MouseEvent>;
542
}
543
544
/**
545
* Float button group component
546
* Selector: nz-float-button-group
547
*/
548
interface NzFloatButtonGroupComponent {
549
/** Group shape */
550
nzShape: 'circle' | 'square';
551
/** Group trigger */
552
nzTrigger: 'click' | 'hover';
553
/** Group open */
554
nzOpen: boolean;
555
/** Group icon */
556
nzIcon: string | TemplateRef<void>;
557
/** Close icon */
558
nzCloseIcon: string | TemplateRef<void>;
559
/** Group tooltip */
560
nzTooltip: string | TemplateRef<void>;
561
/** Group type */
562
nzType: 'default' | 'primary';
563
/** Open change event */
564
nzOnOpenChange: EventEmitter<boolean>;
565
}
566
567
// Module
568
class NzFloatButtonModule {
569
static forRoot(): ModuleWithProviders<NzFloatButtonModule>;
570
}
571
```