src/app/forms/elements/elements.component.ts
| selector | app-elements |
| styleUrls | ./elements.component.scss |
| templateUrl | ./elements.component.html |
Methods |
constructor()
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-elements',
templateUrl: './elements.component.html',
styleUrls: ['./elements.component.scss']
})
export class ElementsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<div fxLayout="row wrap" fxLayoutGap="24px grid">
<div fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-title>基本表单</mat-card-title>
<mat-card-content>
<form>
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的邮箱" />
</mat-form-field>
<mat-form-field class="display-block">
<input matInput placeholder="请输入您的密码" />
</mat-form-field>
<mat-checkbox class="form-check">记住我</mat-checkbox>
<button mat-raised-button color="primary" type="submit">提交</button>
</form>
</mat-card-content>
</mat-card>
</div>
<div fxFlex.lt-md="50" fxFlex.lt-sm="100">
<mat-card>
<mat-card-title>基本表单</mat-card-title>
<mat-card-content>
<form>
<div fxLayout="row" fxLayoutAlign="center center">
<label>邮箱：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="center center">
<label>密码：</label>
<mat-form-field fxFlex> <input matInput /> </mat-form-field>
</div>
<mat-checkbox class="form-check">记住我</mat-checkbox>
<button mat-raised-button color="primary" type="submit">提交</button>
</form>
</mat-card-content>
</mat-card>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="m-t-24">
<mat-card>
<mat-card-title>单行表单</mat-card-title>
<mat-card-content>
<form>
<mat-form-field>
<input matInput placeholder="请输入您的邮箱" />
</mat-form-field>
<mat-form-field>
<input matInput placeholder="请输入您的密码" />
</mat-form-field>
<button mat-raised-button color="primary" type="submit">提交</button>
</form>
</mat-card-content>
</mat-card>
</div>
./elements.component.scss
:host {
display: block;
padding: 15px;
}
.form-check {
display: block;
margin: 16px 0 32px;
}
.display-block {
display: block;
}