简介
mat-nei 是一个 UI 组件库，其组件基于 Angular Material 设计，提供了丰富的可定制化界面组件。通过引入 mat-nei 包，我们可以在 Angular 应用中便捷地使用这些 UI 组件，提升我们的开发效率和用户体验。
安装
在使用 mat-nei 之前，我们需要将其引入到我们的 Angular 应用中。最简单的方式是通过 npm 安装：
npm install mat-nei
这样就将 mat-nei 包引入到了你的项目中，在需要使用组件的组件模块中头部引入即可：
-- -------------------- ---- -------
------ - ------------ - ---- ----------
-----------
-------- -
-------------
-- ----- -------
--
-- ----- ----
--
------ ----- -------- - -使用示例
mat-nei 涵盖了大多数常用的 UI 组件，其中最常用的几个组件为 Button、Input 和 Dialog 等，我们下面以这些组件为例子演示其使用方法。
Button
使用方法
首先，在 HTML 模板中引入 Button 组件的标签：
<button mat-button>Click me!</button>
然后，在组件中引入 MatButton 模块：
import { MatButton } from '@angular/material/button';在 module 中使用 MatButton 模块：
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [MatButtonModule]
})按钮风格
mat-nei 的按钮均支持多种风格，常用的风格如下：
<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-icon-button disabled> <mat-icon>home</mat-icon> </button>
Input
使用方法
在 HTML 模板中引入 Input 组件的标签：
<mat-form-field> <input matInput placeholder="Input text"> </mat-form-field>
然后，在组件中引入 MatInputModule 组件：
import { MatInputModule } from '@angular/material/input';在 module 中导入 MatInputModule 组件：
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [MatInputModule]
})带图标的输入框
输入框组件还可以带有内部图标，如 Search：
<mat-form-field> <mat-icon matPrefix>search</mat-icon> <input matInput placeholder="Search"> </mat-form-field>
Dialog
使用方法
在组件中引入 MatDialog 模块：
import { MatDialog } from '@angular/material/dialog';在需要使用 Dialog 的组件中注入 MatDialog：
-- -------------------- ---- -------
------ ----- ----------- -
------------------ ------- ---------- --
------------ -
----- --------- - ------------------------------------
---------------------------------------- -- -
------------------- ------- ------------
---
-
-然后，我们可以使用 open() 方法打开 Dialog：
const dialogRef = this.dialog.open(MyDialogComponent);
需要注意的是，Dialog 内容需要作为另外一个 Component 引入，我们需要先创建该 Component（这里以 MyDialogComponent 为例），并在 open() 方法中引入：
const dialogRef = this.dialog.open(MyDialogComponent);
Dialog 中还可以传入数据和设置配置选项，具体设置方法可以参考官方文档[1]。
总结
mat-nei 是一个功能丰富的 UI 组件库，为我们提供了各种强大的、可定制化的 UI 组件，并且使用方法简单。掌握了 mat-nei 的使用方法，我们可以在 Angular 应用中轻松地使用这些组件，提升应用的用户体验，优化开发效率。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f7e81e8991b448dce4c