ohayolibs
Version:
Ohayo is a set of essential modules for ohayojp.
89 lines (82 loc) • 2.99 kB
Markdown
---
order: 10
title:
zh-CN: 不规则布局
en-US: Irregular Layout
---
## zh-CN
利用 `col` 可以构建复杂不规则布局。
## en-US
Use `col` to build complex irregular layouts.
```ts
import { Component } from '@angular/core';
@Component({
selector: 'app-demo',
template: `
<form nz-form #f="ngForm" se-container size="compact" gutter="24">
<se-title>Title 1</se-title>
<se label="ID" col="1" [optionalHelp]="optionalHelpTpl">
1000
<ng-template #optionalHelpTpl> Via by ng-template </ng-template>
</se>
<se label="Name" required col="3" optionalHelp="The background color is #f50" optionalHelpColor="#f50">
<input type="text" nz-input [(ngModel)]="i.user_name" name="user_name" required />
</se>
<se label="Age" required col="3">
<nz-select [(ngModel)]="i.user_age" name="user_age" nzAllowClear nzPlaceHolder="Choose">
<nz-option [nzValue]="1" nzLabel="1"></nz-option>
<nz-option [nzValue]="2" nzLabel="2"></nz-option>
<nz-option [nzValue]="3" nzLabel="3"></nz-option>
<nz-option [nzValue]="4" nzLabel="4"></nz-option>
<nz-option [nzValue]="5" nzLabel="5"></nz-option>
</nz-select>
</se>
<se label="Brithday" required col="3">
<nz-date-picker [(ngModel)]="i.user_birthday" name="user_birthday" nzShowTime></nz-date-picker>
</se>
<se label="App Key" required>
<input type="text" nz-input [(ngModel)]="i.ak" name="ak" required />
</se>
<se label="App Secret" required>
<input type="text" nz-input [(ngModel)]="i.sk" name="sk" required maxlength="32" />
</se>
<se label="Phone Number" required>
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
<ng-template #addOnBeforeTemplate>
<nz-select [(ngModel)]="i.phoneNumberPrefix" name="phoneNumberPrefix" style="width: 70px;">
<nz-option nzLabel="+86" nzValue="+86"></nz-option>
<nz-option nzLabel="+87" nzValue="+87"></nz-option>
</nz-select>
</ng-template>
<input type="text" nz-input [(ngModel)]="i.phoneNumber" name="phoneNumber" required maxlength="32" />
</nz-input-group>
</se>
<se>
<label nz-checkbox [(ngModel)]="i.agree" name="agree">
<span>I have read the <a>agreement</a></span>
</label>
</se>
<se-title>Title 2</se-title>
<se label="Long Long Long Long Long Long Label" col="1">
<textarea [(ngModel)]="i.comment" name="comment" nz-input rows="2" placeholder="write any thing"></textarea>
</se>
<se col="1">
<button nz-button nzType="primary" [disabled]="f.invalid">Save</button>
</se>
</form>
`,
})
export class DemoComponent {
i = {
user_name: '',
user_age: 3,
user_birthday: '',
ak: '',
sk: '',
phoneNumberPrefix: '+86',
phoneNumber: '',
agree: true,
comment: '',
};
}
```