Angular 是一个开源的 Web 应用程序框架，它被广泛用于构建单页应用、网站和混合应用。在使用 Angular 开发应用程序时，我们通常会用到 Angular Material，这是一个 Material Design 风格的 UI 组件库。
Angular Material 可以让开发者很容易地使用 Material Design 风格的 UI 组件来构建 Web 应用程序。这个组件库提供了许多 UI 组件，包括按钮、卡片、对话框、表单域等等。
本文将介绍如何使用 Angular Material 创建响应式布局。我们将会使用 Angular Material 提供的一些 UI 组件来创建一个响应式布局，它可以根据设备大小和方向自适应。
创建响应式布局
Angular Material 提供了一些 UI 组件，它们可以很容易地创建响应式布局。首先，我们需要安装 Angular Material 和 Angular CDK（组件开发工具包）：
npm install --save @angular/material @angular/cdk
接下来，在 Angular 应用程序的根模块中导入所需的 Angular Material 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------
--------------
-------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在根模块中，我们导入了 BrowserAnimationsModule、MatButtonModule、MatCardModule 和 MatIconModule 模块。这些模块提供了一些常见的 Material Design 风格的 UI 组件。
接下来，我们需要在组件模板中使用这些 UI 组件来创建响应式布局。在我们的示例中，我们将创建一个响应式的卡片布局。这个布局包括三个卡片，每个卡片包含一个图标和一些文本。
在组件模板中，我们可以使用 Angular Material 提供的 mat-grid-list 和 mat-card 组件来创建响应式卡片布局：
-- -------------------- ---- -------
-------------- -------- ----------------- ------------------
---------------
----------
-------------------------
-------------------------------------
---------------------- ----------------------------
-----------
----------------
---------------
----------
---------------------------
----------------------------------------
---------------------- ------- ------------------------------
-----------
----------------
---------------
----------
-----------------------------
-----------------------------------------
---------------------- --- ---------------------------
-----------
----------------
----------------在这个示例中，我们使用了 mat-grid-list 组件来创建一个网格布局，并使用 cols 属性设置列数为 1，rowHeight 属性设置行高为 150px，gutterSize 属性设置边距为 10px。
然后，我们在每个 mat-grid-tile 中使用 mat-card 组件来创建一个卡片。在每个卡片中，我们使用了 mat-icon、mat-card-title 和 mat-card-content 组件来创建一个图标和一些文本。
响应式布局
现在我们已经创建了一个简单的响应式卡片布局。但是，我们需要让布局在不同大小和方向的设备上自适应。
为了实现响应式布局，我们可以使用 Angular 的 Flex Layout 库。这个库使用 Flexbox 布局来创建响应式布局，并提供了一些工具和指令来方便地使用 Flexbox。
首先，我们需要安装 Flex Layout 库：
npm install --save @angular/flex-layout
接下来，我们需要在根模块中导入 Flex Layout 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ---------------------------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
----------------
--------------
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在根模块中，我们导入了 FlexLayoutModule 模块。这个模块提供了一些指令，如 fxLayout、fxLayoutGap、fxLayoutAlign 等等，用来创建响应式布局。
接下来，我们需要在组件模板中使用这些指令来创建响应式布局。在我们的示例中，我们将使用 fxLayout 指令来创建一个垂直排列的卡片布局，并使用 fxLayoutGap 指令来设置卡片之间的间距：
-- -------------------- ---- -------
---- ----------------- -------------------
---- -----------------------
----------
-------------------------
-------------------------------------
---------------------- ----------------------------
-----------
------
---- -----------------------
----------
---------------------------
----------------------------------------
---------------------- ------- ------------------------------
-----------
------
---- -----------------------
----------
-----------------------------
-----------------------------------------
---------------------- --- ---------------------------
-----------
------
------在这个示例中，我们在外层 div 中使用了 fxLayout 指令来创建一个垂直排列的布局。我们还使用了 fxLayoutGap 指令来设置卡片之间的间距为 20px。
然后，我们在每个 div 中使用 fxLayoutAlign 指令来将卡片居中对齐。在每个卡片中，我们使用了 mat-icon、mat-card-title 和 mat-card-content 组件来创建一个图标和一些文本。
现在，我们的卡片布局已经可以响应不同大小和方向的设备了。当用户在手机上浏览应用程序时，卡片布局会自动缩小并排列在一起，而在平板电脑和桌面电脑上，卡片布局会适当地调整大小和排列方式，以适应页面宽度。
结论
Angular Material 是一个非常有用的 UI 组件库，它提供了许多 Material Design 风格的 UI 组件，可以帮助我们快速构建 Web 应用程序。在使用 Angular Material 时，我们应该注意创建响应式布局，以便应用程序可以在不同大小和方向的设备上自适应。
在本文中，我们使用了 Angular Material 提供的一些 UI 组件和 Flex Layout 库来创建一个响应式卡片布局。这个布局可以根据设备大小和方向自适应，并使用了 Material Design 风格的 UI 组件来使应用程序看起来更加现代和美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f996b5f5512810265f064