引言
在前端开发中，使用现成的组件库可以大大提高工作效率。-ng-material-components 是一个基于 Angular 的 Material Design 组件库，它提供了一系列优雅、易用且高度可定制的组件，包括按钮、复选框、文本框、卡片等。本文将详细介绍 ng-material-components 的安装和使用。
安装
安装 ng-material-components 很简单，只需使用 npm 安装即可：
npm install ng-material-components --save
使用
首先，需要在 Angular 应用程序中导入所需的模块。通常，我们需要在 app.module.ts 文件中注册组件：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------------------- - ---- -------------------------
-----------
------------- -
------------
--
-------- -
--------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -一旦成功地导入了 ng-material-components，我们就可以在应用程序中使用组件了。
例如，我们可以使用 ng-material-components 的按钮组件：
<button mc-button>Click me!</button>
我们还可以通过添加其它属性来高度定制按钮，例如：
<button mc-button color="primary">Primary button</button> <button mc-button color="warn">Warn button</button> <button mc-button [disabled]="true">Disabled button</button> <button mc-raised-button>MC raised button</button> <button mc-fab>Fab</button> <button mc-icon-button><i class="material-icons">favorite</i></button>
示例代码
例如，下面是一个展示了按钮组件的 Angular 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------------
--------- -
------- --------------- ------------
------- --------- ----------------------- ---------------
------- --------- ----------------- ---------------
------- --------- -------------------------- ---------------
------- ------------------- ------ ---------------
------- -------------------
------- ----------------- --------------------------------------------
-
--
------ ----- ---------------------- - -总结
在本文中，我们介绍了如何安装和使用 ng-material-components ，这是一个可以为提高你的工作效率的 Material Design 组件库。我们还展示了按钮组件作为一个使用示例。希望你能从中受益，并使用这个组件库来让自己的应用程序更具 Material Design 风格。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663e81e8991b448e244a