Angular Material 核心控件 (1)

Angular Material 包括很多不同类型的控件。在应用开发中，最为常用的主要类型如下：

按钮（Buttons）：
表单控件（Form contorls）：
导航控件（Navigation）：
布局控件（Layout）：
弹窗（Popups/modals）：
表格（Tables）：

按钮

在Angular Material 设计一文中，我们创建了一个简单的按钮。除此之外，Angular Design 还提供了很多不同类型的按钮：

mat-raised-button: 按钮边缘会出现阴影，展示按钮凸起的状态；与之相对的是 mat-flat-button样式的按钮，没有阴影。
mat-stroked-button: 有边框的按钮。
mat-icon-button: 图标按钮，不包含文字。
mat-fab: 圆形图标按钮。
mat-mini-fab, 更小的圆形图标按钮。
mat-button-toggle: 开关按钮，表示是否按下或开启的状态。

在使用按钮控件时，需要导入 MatButtonModule、MatIconModule 和 MatButtonToggleModule 三个模块：

import { BrowserModule } from '@angular/platform-browser’;
import { NgModule } from '@angular/core’;

import { AppComponent } from './app.component’;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations’;
…
import { MatButtonModule } from "@angular/material/button”;
import { MatIconModule } from "@angular/material/icon”;
import { MatButtonToggleModule } from "@angular/material/button-toggle”;


@NgModule({
  declarations: [
    AppComponent,
    ButtonsComponent,
    FormsComponent,
    MenusComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    …
    MatButtonModule,
    MatIconModule,
    MatButtonToggleModule,
    …
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 src/app/buttons/buttons.component.html 文件中，添加下列控件：

<section>
  <div class="example-label">Basic</div>
  <div class="example-button-row”>
    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>
    <a mat-button href="https://www.jianshu.com/u/d3bfbaca83b7" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row”>
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.jianshu.com/u/d3bfbaca83b7" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Stroked</div>
  <div class="example-button-row”>
    <button mat-stroked-button>Basic</button>
    <button mat-stroked-button color="primary">Primary</button>
    <button mat-stroked-button color="accent">Accent</button>
    <button mat-stroked-button color="warn">Warn</button>
    <button mat-stroked-button disabled>Disabled</button>
    <a mat-stroked-button href="https://www.jianshu.com/u/d3bfbaca83b7" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Flat</div>
  <div class="example-button-row”>
    <button mat-flat-button>Basic</button>
    <button mat-flat-button color="primary">Primary</button>
    <button mat-flat-button color="accent">Accent</button>
    <button mat-flat-button color="warn">Warn</button>
    <button mat-flat-button disabled>Disabled</button>
    <a mat-flat-button href="https://www.jianshu.com/u/d3bfbaca83b7" target="_blank">Link</a>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Icon</div>
  <div class="example-button-row”>
    <div class="example-flex-container”>
      <button mat-icon-button aria-label="Example icon button with a vertical three dot icon”>
        <mat-icon>more_vert</mat-icon>
      </button>
      <button mat-icon-button color="primary" aria-label="Example icon button with a home icon”>
        <mat-icon>home</mat-icon>
      </button>
      <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon”>
        <mat-icon>menu</mat-icon>
      </button>
      <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon”>
        <mat-icon>favorite</mat-icon>
      </button>
      <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon”>
        <mat-icon>open_in_new</mat-icon>
      </button>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">FAB</div>
  <div class="example-button-row”>
    <div class="example-flex-container”>
      <div class="example-button-container”>
        <button mat-fab color="primary" aria-label="Example icon button with a delete icon”>
          <mat-icon>delete</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon”>
          <mat-icon>bookmark</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-fab color="warn" aria-label="Example icon button with a home icon”>
          <mat-icon>home</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-fab disabled aria-label="Example icon button with a heart icon”>
          <mat-icon>favorite</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>
<mat-divider></mat-divider>
<section>
  <div class="example-label">Mini FAB</div>
  <div class="example-button-row”>
    <div class="example-flex-container”>
      <div class="example-button-container”>
        <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon”>
          <mat-icon>menu</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon”>
          <mat-icon>plus_one</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon”>
          <mat-icon>filter_list</mat-icon>
        </button>
      </div>
      <div class="example-button-container”>
        <button mat-mini-fab disabled aria-label="Example icon button with a home icon”>
          <mat-icon>home</mat-icon>
        </button>
      </div>
    </div>
  </div>
</section>

页面显示效果：

按钮控件

表单

在 Angular Material 类库中，提供了很多表单控件，例如：Autocomplete、Autocomplete、Date picker、Input、Radio button 等等。下面通过一个登录表单，展示表单控件的使用。

在使用表单控件时，需要导入 MatFormFieldModule 和 MatInputModule 两个模块：

import { BrowserModule } from '@angular/platform-browser’;
import { NgModule } from '@angular/core’;

import { AppComponent } from './app.component’;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations’;
…
import { MatFormFieldModule } from "@angular/material/form-field”;
import { MatInputModule } from "@angular/material/input”;
…

@NgModule({
  declarations: [
    AppComponent,
    ButtonsComponent,
    FormsComponent,
    MenusComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    …
    MatFormFieldModule,
    MatInputModule,
    …
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 src/app/forms/forms.component.html 文件中，添加下列控件

<div class="example-container”>

  <mat-form-field appearance=“fill”>
    <mat-label>输入用户名</mat-label>
    <input matInput [type]="'text’”>
  </mat-form-field>

  <mat-form-field appearance=“fill”>
    <mat-label>输入口令</mat-label>
    <input matInput [type]="hide ? 'password' : 'text’”>
    <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'隐藏口令'" [attr.aria-pressed]=“hide”>
      <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>

</div>

页面显示效果：

表单控件

import { BrowserModule } from '@angular/platform-browser’;
import { NgModule } from '@angular/core’;

import { AppComponent } from './app.component’;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations’;
…
import { MatMenuModule } from "@angular/material/menu”;
…

@NgModule({
  declarations: [
    AppComponent,
    ButtonsComponent,
    FormsComponent,
    MenusComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    …
    MatMenuModule,
    …
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 src/app/menus/menus.component.html 文件中，添加下列菜单控件：

<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu”>
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu=“matMenu”>
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>重拨号码</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>语音信箱</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>免打扰</span>
  </button>
</mat-menu>

页面显示效果：

菜单

最后编辑于：2022.05.30 18:14:30

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,110评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,443评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 165,474评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,881评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,902评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,698评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,418评论 3赞 419
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,332评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,796评论 1赞 316
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,968评论 3赞 337
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,110评论 1赞 351
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,792评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,455评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,003评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,130评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,348评论 3赞 373
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,047评论 2赞 355

Angular Material 核心控件 (1)

按钮

表单

导航

推荐阅读更多精彩内容