Ngx-Material 是一个 Angular 框架下的 Material 设计风格 UI 组件库。该组件库的特点是简单易用、高可扩展性、可自定义且轻量。本教程将介绍如何使用 ngx-material 做 Web 前端开发。
安装 Ngx-Material
确认系统环境
在你开始使用 ngx-material 之前，请确保你已经安装了 Node.js 和 npm，因为 npm 是 ngx-material 的包管理工具之一。
你可以简单地在命令行中键入以下指令，如果得到版本号信息，则表示已经安装成功：
node -v npm -v
安装 ngx-material
在命令行中使用以下指令，即可完成 ngx-material 的下载和安装：
npm install --save @angular/material @angular/cdk @angular/animations
引入 ngx-material
在你的 Angular 项目中引入 ngx-material 的方式很简单，只需要在 app.module.ts 文件中添加以下代码：
import {NgModule} from '@angular/core';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
imports: [MatButtonModule],
exports: [MatButtonModule]
})
export class MyMaterialModule {}在需要使用 ngx-material 的组件引入 MyMaterialModule 即可。
Ngx-Material 组件使用
除了常规的 Material 组件，Ngx-Material 也提供了一些独特的组件，例如 file-input、date-picker 和 time-picker 等。下面我们将以 date-picker 组件为例来说明如何使用 Ngx-Material。
引入依赖
在组件中引入依赖，并且添加 CSS 样式表和实例化 MatDatepicker。
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ------------------------- ---- -------------------------------
------------
--------- ------------------
------------ -------------------------------
---------- --------------------------------
--
------ ----- ------------------- -
----- ---- - --- -------
------------- --
-------------- ------- ------ ------------------------------ -
--------- - ------------
-
-添加 HTML 代码
在 HTML 页面中添加 date-picker。
<mat-form-field appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput (dateChange)="addEvent('input', $event)" [min]="minDate" [max]="maxDate" [matDatepicker]="picker" [(ngModel)]="date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>结论
Ngx-Material 是一个简单易用的 Material 设计风格 UI 组件库，可支持自定义，并且提供了详细的官方文档。通过学习本文，你已经学会了如何使用 Ngx-Material 中的 date-picker 组件，希望对你的前端开发工作有所帮助。
示例代码
完整的示例代码可以从 Github 上的 Ngx-Material 仓库获取：
git clone https://github.com/mseemann/ngx-material.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005586c81e8991b448d5a52