Angular Material 核心控件 (1)

作者: 品品下午茶 | 来源:发表于2022-05-30 16:18 被阅读0次

Angular Material 核心控件 (1)
Angular Material 核心控件 (2)
Angular实战项目（1）
marterial库的使用
angular6.x--虚拟滚动
angular文件上传，支持多文件、拖拽、重试以及上传进度
angular2封装material2对话框组件
Angular Material应用程序主题化
Google 开发者大会回顾（提纲only）
Angular 项目引入Angular material UI

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>

页面显示效果：

菜单

Angular Material 核心控件 (1)
Angular Material 包括很多不同类型的控件。在应用开发中，最为常用的主要类型如下：按钮（Butto...
Angular Material 核心控件 (2)
继续上一篇文章[https://www.jianshu.com/p/039175f06b14]，我们继续介绍三个常...
Angular实战项目（1）
Angular 打造企业级协作平台环境搭建，Material UI，动画，Angular核心概念，RxJS操作符...
marterial库的使用
第1步：安装Angular Material，Angular CDK和Angular Animations 您可以...
angular6.x--虚拟滚动
1.安装@angular/material、@angular/cdkcnpm install --save @an...
angular文件上传，支持多文件、拖拽、重试以及上传进度
1. Dependencies @angular/cdk @angular/material 2. file-up...
angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详，控件不齐，使用上造成了很大的障碍。这里提供一个方案用于...
Angular Material应用程序主题化
Theming your Angular Material app 将您的Angular Material应用程序...
Google 开发者大会回顾（提纲only）
Angular## Angular cross platformsWeb: Angular + Material...
Angular 项目引入Angular material UI
Install Angular Material, Angular CDK and Angular Animati...