ng-ytl-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
86 lines (84 loc) • 2.15 kB
text/typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'nz-demo-grid-flex',
template: `
<div>
<p>sub-element align left</p>
<div nz-row [nzType]="'flex'" [nzJustify]="'start'">
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
</div>
<p>sub-element align center</p>
<div nz-row [nzType]="'flex'" [nzJustify]="'center'">
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
</div>
<p>sub-element align right</p>
<div nz-row [nzType]="'flex'" [nzJustify]="'end'">
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
</div>
<p>sub-element monospaced arrangement</p>
<div nz-row [nzType]="'flex'" [nzJustify]="'space-between'">
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
</div>
<p>sub-element align full</p>
<div nz-row [nzType]="'flex'" [nzJustify]="'space-around'">
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
<div nz-col [nzSpan]="4">
col-4
</div>
</div>
</div>`,
styles : []
})
export class NzDemoGridFlexComponent { }