Angular 中如何使用 Angular Material - 教程

Angular Material 是一个用于构建 Web 应用程序的 UI 组件库，它基于谷歌的 Material Design 设计原则。使用 Angular Material 可以帮助开发者更方便、更快速地创建美观的界面。本文将介绍如何在 Angular 中使用 Angular Material。

步骤

1. 安装依赖

在使用 Angular Material 前，需要安装一些依赖。

npm install --save @angular/material @angular/cdk @angular/flex-layout @angular/animations

其中，@angular/material 是主要的 Angular Material 模块，@angular/cdk 包含了 Angular Material 组件所需的通用服务，@angular/flex-layout 是一个响应式 UI 框架，允许创建可响应的布局。@angular/animations 是 Angular 的动画库。

1. 在 angular.json 中配置样式

在项目的 angular.json 文件中，需要将 Angular Material 的样式文件和主题文件添加到 styles 数组中。

"styles": [
    "src/styles.css",
    "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
]

这里使用了 indigo-pink 样式主题，可以选择其他主题。

1. 导入模块

在需要使用 Angular Material 的模块中，需要导入 MatIconModule、MatToolbarModule、MatButtonModule 等模块。例如：

-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
------ - --------------- - ---- ---------------------------

-----------
    -------- -
        ------------
        -------------
        --------------
        -----------------
        ---------------
    --
    -------- -
        ------------
        -------------
        --------------
        -----------------
        ---------------
    -
--
------ ----- ------------ - -

这里导入了 MatIconModule、MatToolbarModule 和 MatButtonModule 模块，并添加到了 imports 和 exports 数组中，以便在使用时能够正常引用。

组件使用示例

Button

Angular Material 的 MatButton 组件可以用来创建各种类型的按钮。例如：

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>

Toolbar

MatToolbar 组件可以用来创建页面顶部的工具栏。例如：

<mat-toolbar color="primary">
    <span>My Application</span>
    <span class="spacer"></span>
    <a mat-button>Home</a>
    <a mat-button>About</a>
</mat-toolbar>

其中，.spacer 是一个 CSS 类，用来让工具栏中的元素居中对齐。

.spacer {
    flex: 1 1 auto;
}

Icon

Angular Material 的 MatIcon 组件可以用来添加各种 Material icons。例如：

<mat-icon>home</mat-icon>

Card

MatCard 组件可以用来创建卡片式布局。例如：

-- -------------------- ---- -------
----------
    -----------------
        -------------------- ----------------------
    ------------------
    ------------------
        ------- -----------
    -------------------
    ------------------
        ------- ------------------------
        ------- -------------------------
    -------------------
-----------

结论

本文介绍了如何在 Angular 中使用 Angular Material。通过使用 Angular Material，可以帮助开发人员更快速地创建美观的 Web 应用程序。希望本文能够对您开发 Web 应用程序时的工作有所帮助。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6771032a6d66e0f9aacb0bdd