介绍
@perfectlynormal/ngx-bootstrap 是一个 Angular 的 UI 库，它是 ng-bootstrap 和 Bootstrap 的进一步封装。它基于 Twitter Bootstrap 的样式和组件，提供了 Angular 版本的实现。使用 ngx-bootstrap 可以大大简化前端开发人员的工作，提高开发效率。
特色
- ngx-bootstrap 中的所有组件均为原生 Angular 组件
- 组件有可选的依赖项，比如 HammerJS
- 支持 AOT 编译
- 支持 SSR
- 可以自定义主题
安装
使用 npm 安装，输入以下命令：
--- ------- ------ ------------------------------
使用
引入 ngx-bootstrap 模块
在 Angular 应用程序的 AppModule 中引入 ngx-bootstrap 模块：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -----------------------------------------
-----------
-------- -
--------------
------------
-----------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -使用组件
------- ------------- ------------------- ------------------- ------- ------- -- ----- ---------
<button> 标签显示了一个 tooltip。当你将鼠标悬停在 <button> 上时，会弹出一个 tooltip 气泡，并显示内容 "Hello world"。
示例代码
这里为了演示，我们使用最常用的 tooltip 来展示如何使用 ngx-bootstrap。首先我们在 HTML 文件中写入以下代码：
------- ------------- ---------- --------- --------------------------- ------------
之后我们需要在 TS 文件中引入和声明 tooltip 模块：
------ - ------------- - ---- -----------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- ---
---------- --------------
--最后我们需要在 CSS 中引入 Bootstrap 的样式：
----- ---------------- --------------------------------------------------------------------------
现在我们就可以用 ng serve 命令启动这个应用程序，并看到 Tooltip 组件在鼠标悬浮时提示出现了。
总结
@perfectlynormal/ngx-bootstrap 可以大大简化前端开发人员的工作，提高开发效率。本文介绍了 ngx-bootstrap 的安装和使用方法，并提供了一个简单的示例。不管是 Angular 新手还是老手，都可以很容易上手使用 ngx-bootstrap。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005664781e8991b448e25c3