前言
在开发前端项目时，UI 层面的实现是一个必不可少的部分。而要使 UI 层面的实现更具有美感、可读性和可复用性，使用 Bootstrap 是一个不错的选择。不过，在 Angular 环境中，使用原生的 Bootstrap 往往需要自定义指令或封装组件，这增加了开发难度并且降低了开发效率。而 @ng-nice/mdbootstrap 正式为了解决这个问题而存在的。
什么是 @ng-nice/mdbootstrap
@ng-nice/mdbootstrap 是一个基于 Angular 的 UI 组件库，它是基于 MDBootstrap 构建的。与其他类似库相比，@ng-nice/mdbootstrap 是一个相对较轻量级的解决方案，它提供了一些 UI 组件和模板，并且可以轻轻松松地同时使用 Bootstrap 和 Angular。
如何使用 @ng-nice/mdbootstrap
安装
@ng-nice/mdbootstrap 是一个 npm 包，要安装它，只需在命令行工具中依次执行以下命令：
npm install --save mdbootstrap
引入样式文件
在 Angular 项目中，除非我们使用 Angular Cli 构建了应用程序，则默认没有集成 Bootstrap 样式文件。因此，在使用 @ng-nice/mdbootstrap 之前，你需要在 index.html 文件中引入 bootstrap.min.css 样式文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
另外，还需要引入 MDB 样式文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css">
引入 JavaScript 文件
同样，你需要在你想使用 @ng-nice/mdbootstrap 组件的页面中引入以下脚本标签：
<!-- JQuery --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js"></script>
在 Angular 中使用组件
使用 @ng-nice/mdbootstrap 组件的方式很简单。首先，在你的 Angular 模块中导入 MdbModule：
-- -------------------- ---- -------
------ - --------- - ---- -----------------------
-----------
------------- -
------------
--
-------- -
--------------
---------
--
---------- ---
---------- --------------
--
------ ----- --------- - -然后，你便可以在你的 Angular 组件中使用它们了：
<mdb-card>
<mdb-card-body>
<h4 class="card-title">Card title</h4>
<p class="card-text">Some text inside the card...</p>
</mdb-card-body>
</mdb-card>目前 @ng-nice/mdbootstrap 支持的组件包括：accordion（手风琴）、alert（警告框）、buttons、cards、carousel（轮播图）、collapse（折叠面板）、dropdowns（下拉菜单）、forms、icons、inputs、list-group、modal、navbar、pagination（分页）、popovers、progress bars、spinners、tab、tooltips 和 typography。
示例代码
以下是一个简单的 @ng-nice/mdbootstrap 弹出框组件的示例代码：
-- -------------------- ---- -------
---- ------------ ---
------
------
----- ---------------- --------------------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------
------- ---------------------- ---------------------------------------------------------------------------------
------- ---------------------- -----------------------------------------------------------------------------------------
------- ---------------------- --------------------------------------------------------------------------------------------------
------- ---------------------- ---------------------------------------------------------------------------------------
-------
------
------------------
---- ----- ---
------------------
--- ------------ ----------------------- ----------
-------------------
---- ----- ---
-------------------
------- ---- ------ --- ---------
--------------------
---- ----- ---
------------------
------- ------------- ---------- --------------------- ------------- ----------------- --- -------- -------------------------------------------
------- ------------- ---------- ----------- ------------ ----------------- ----------------
-------------------
-------------------
-------
-------总结
通过本文，你已经了解了如何使用 @ng-nice/mdbootstrap，现在你可以开始享受 Angular 与 Bootstrap 的完美结合，提高你的开发效率和 UI 美感。不过需要注意的是，虽然 @ng-nice/mdbootstrap 对 Angular 十分友好，但毕竟不是官方组件库，它可能存在一些问题和限制。因此，我们需在使用它的过程中，灵活启用、评估并根据具体业务情况筛选需要使用的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b2f81e8991b448e53f3