简介
ngx-bootstrap-shaher 是一个基于 Angular 构建的 UI 组件库，它提供了许多常用的组件和指令，包括了如下类型:
- 弹出框
- 下拉菜单
- 分页
- 树形控件
- 表格及数据绑定
- 日历
- 等等
这个组件库可以方便地让我们开发一个漂亮的、标准化的网站。
使用教程
安装
使用 npm 作为包管理工具，一行命令进行安装：
npm install ngx-bootstrap-shaher --save
导入
在项目的 app.module.ts 中导入所需的组件和指令：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
-- -- -------------------- ---
------ - ----------------- ------------- - ---- -----------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
-- ---------
---------------------------
-----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -导入了 ngx-bootstrap-shaher 组件库之后，就可以在其他组件中使用它了。
使用
下面来看一个简单的示例：
<button type="button" class="btn btn-default"
tooltip="Hello, world!"
placement="bottom">
点击弹出提示框
</button>在这个示例中：
btn-default类指定了按钮的样式tooltip指令指定了提示框的内容placement属性指定了提示框出现的位置
运行这个代码就可以看到一个按钮，当鼠标移动到上面时，会出现一个带有 "Hello, world!" 内容的提示框。
指导意义
通过这个教程，我们学会了如何使用 ngx-bootstrap-shaher 组件库，可以方便地开发一个漂亮的、标准化的网站。在使用过程中，需要注意以下几点：
- 导入的组件和指令需要和使用的版本保持一致
- 每个组件和指令都有自己的 API 文档，可以查阅它们的属性和方法
- 在使用时需要注意组件和指令的依赖关系，有些组件需要指定其它组件的参数才能正常工作
示例代码
完整的示例代码可以在 ngx-bootstrap-shaher 在线示例中查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671f81e8991b448e384d