angular-material-app documentation
  1. Components
  2. ElementsComponent

File

src/app/forms/elements/elements.component.ts

Implements

OnInit

Metadata

selector app-elements
styleUrls ./elements.component.scss
templateUrl ./elements.component.html

Index

Methods

Constructor

constructor()
Defined in src/app/forms/elements/elements.component.ts:8

Methods

ngOnInit
ngOnInit()
Defined in src/app/forms/elements/elements.component.ts:12
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() {
  }

}
Copy
<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>
Copy

./elements.component.scss 

:host {
  display: block;
  padding: 15px;
}

.form-check {
  display: block;
  margin: 16px 0 32px;
}

.display-block {
  display: block;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""