在 Angular2 中，使用 Material Design 风格的 UI 组件可以使我们的应用程序看起来更加现代和专业。这些组件可用于构建直观且易于使用的用户界面，同时提供一致的设计和交互方式。
安装 Material Design 组件
要使用 Material Design 组件，我们需要在 Angular2 项目中安装 @angular/material 和 @angular/cdk（组件开发工具包） 。可以使用 npm 或 yarn 来完成安装。
--- ------- ------ ----------------- ------------
或者
---- --- ----------------- ------------
接下来，我们需要在应用程序的根模块中导入 Material Module。
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - -------------- - ---- --------------------------
------ - ------------------ - ---- -------------------------------
------ - ------------ - ---- ------------------
-----------
-------- --------------- ------------------------ --------------- --------------------
------------- ---------------
---------- --------------
--
------ ----- --------- - -在这个例子中，我们导入了 MatInputModule 和 MatFormFieldModule，这两个模块提供了 Material Design 风格的输入框和表单字段组件。
Material Design 组件的使用
在 Angular2 中使用 Material Design 组件与使用其他组件相似，只是需要在 HTML 模板中使用 Material Design 组件的选择器和属性。
例如，以下是一个使用 MatInput 组件的示例：
---------------- ------ -------- ------------------ ---- ------ -----------------
在这个例子中，我们使用了 mat-form-field 组件来包裹 input 标签，并使用 matInput 属性来应用 Material Design 的样式。
示例代码
以下是一个使用 MatInput 和 MatFormField 组件的示例：
---------------- ------ -------- ------------------ ---- ------ ----------------- ---------------- --------- -------- ------------------ ---- -------------------- -----------------
在这个例子中，我们创建了两个表单字段，一个是使用 MatInput 组件的输入框，另一个是使用 MatInput 组件的 textarea 元素。
结论
使用 Angular2 的 Material Design 风格组件可以大大提高我们应用程序的外观和易用性。在安装和导入所需的组件后，我们只需要在我们的 HTML 模板中使用它们即可。这些组件还提供了广泛的功能，例如表格、列表、按钮等，可以应用于各种不同类型的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672a1720ddd3a70eb6cf2bb7