npm 包 ng2-bootstrap-base-modified 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 ng2-bootstrap-base-modified 使用教程

介绍

ng2-bootstrap-base-modified 是一个基于 Bootstrap v4 和 Angular 4 的组件库。相比于原版的 ng2-bootstrap，它主要有以下改动：

移除了对 jQuery 的依赖，使其更适合在 Angular 环境下使用；
针对业务场景做了一些调整和封装，提高了使用体验。

安装

你可以通过 npm 安装 ng2-bootstrap-base-modified：

--- ------- --------------------------- ------

使用

安装之后，你需要在你的 app.module.ts 中引入并注册 ng2-bootstrap-base-modified：

------ - ------------ - ---- ------------------
------ - -------- - ---- ----------------
------ - ----------- - ---- -----------------
------ - ---------------------- - ---- ------------------------------

-----------
  -------- -
    -------------
    ------------
    --------------------------------
  --
  ------------- -
    -- ---- -------------
  --
  ---------- -
    -- ---- -----------
  --
  ---------- -
    -- ---- --- ------------
  -
--
------ ----- --------- - -

组件

ng2-bootstrap-base-modified 提供了以下组件：

1. Alert

Alert（警告框）组件用于向用户提供警告或提示信息。

--------- ---------------- -- -- ---- -----------------

Alert 组件有以下 5 种类型：

primary
success
info
warning
danger

属性：

type：设置 Alert 的类型，默认为 info；
dismissible：设置 Alert 是否可关闭，默认为 true。

2. Modal

Modal（弹窗）组件用于展现一段需要用户交互的信息。

--------- ------------- ------ ---------------------
  ---- -------------------
    ---- -- - ------ ------
  ------
  ---- ---------------------
    ------- ------------- ---------- ------------ ------------------ - ---------------------
  ------
-----------

属性：

show：模态框是否显示的 boolean 值，双向绑定；
title：模态框的标题；
size：模态框的大小，共 3 种设置：sm, lg, xl；
backdrop：是否显示背景遮罩，默认为 true；
keyboard：是否允许按 Esc 键关闭模态框，默认为 true；
animation：是否显示动画效果，默认为 true。

事件：

onDismiss：模态框关闭时触发的事件，可以用来清空表单等。

3. Buttons

Buttons（按钮）组件提供了多种样式和状态的按钮。

---------- ----------------------------------
---------- ----------------------------------
---------- ----------------------------
---------- ----------------------------------
---------- --------------------------------

属性：

type：按钮的类型，共 5 种：primary, success, info, warning, danger；
size：按钮的大小，共 3 种设置：sm, md, lg；
disabled：按钮是否禁用；
outline：按钮是否为轮廓样式；
icon：按钮的图标，可以使用 Font Awesome 的图标；
iconPos：按钮内图标的位置，可选值有 left 和 right。

事件：

onClick：按钮被点击时触发的事件。

4. Dropdown

Dropdown（下拉菜单）组件提供了多种样式和功能丰富的下拉菜单。

------------ -----------------
  ----------------- ------------------------------- --------------------
  ----------------- ------------------------------- --------------------
  ----------------- ------------------------------- --------------------
  ----------------- ---------------------------
  ----------------- ------------------------------- --------------------
--------------

属性：

label：下拉菜单的主标签；
icon：下拉菜单的图标，可以使用 Font Awesome 的图标；
position：下拉菜单的位置，可以设置为 left、center 和 right。

事件：

onSelected：下拉菜单中任何一个项被选中时触发的事件。

总结

ng2-bootstrap-base-modified 提供了比较实用的 Bootstrap 插件，让我们更加轻松地进行前端的开发。在开发过程中，可以通过这些组件来减少自己的重复工作，提高开发效率。在 Angular 4 的环境下，使用 ng2-bootstrap-base-modified 可以更加方便地快速开发出我们所需要的功能。

示例代码详见 ng2-bootstrap-base-modified 仓库。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005571881e8991b448d404e