简介
not-bb 是一个可以用来快速创建相对于 Bootstrap 具有更好体验和更易于自定义的前端 UI 组件的 npm 包。not-bb 不仅可以让你快速构建一个前端应用的 UI 界面，同时也让你可以以自己的独特方式为你的应用量身定制 UI 组件。
not-bb 受到 Bootstrap 的启发，但是它并不是简单的 Bootstrap 修改版。not-bb 基于 CSS 及 Sass，使用 Webpack 进行打包成 npm 包发布。
安装
你可以通过 npm 命令来安装 not-bb：
--- ------- ------
或者你可以使用 yarn 命令来安装：
---- --- ------
使用
首先，在你的项目中导入 not-bb 的 CSS 文件：
----- ---------------- -------------------------------------------
然后，在你的 JavaScript 模块中，导入 not-bb：
------ ----- ---- ---------
使用 not-bb 提供的 UI 组件的方法也非常简单，仅需调用组件的 constructor 即可。例如，你可以以以下方式使用 not-bb 提供的按钮组件：
------ ----- ---- --------- ----- -------- - --- -------------- ----- ------ ---- -------- -- -- - ------------------- ----------- - --- ---------------------------------------------
你应该会看到在你的 web 应用中生成了一个按钮，并且当你点击该按钮时，"Button Clicked!" 信息被打印至控制台。not-bb 提供了许多 UI 组件，包括表格、文本框、模态框、下拉菜单等等。
自定义
not-bb 提供了许多途径让你自定义它的 UI 组件，从而让你的前端应用更符合你或者你的企业的品牌标识。
首先，你可以在 not-bb 的 Sass 变量文件中修改基本的颜色、字体等等的属性。该变量文件路径为：
--------------------------------------------
其次，not-bb 使用了 Mixins ，这样你可以在你自己的 Sass 文件中使用这些 Mixins 来改变 not-bb 提供的 UI 组件的样式，或者你也可以定制你自己的 UI 组件。 Mixins 文件路径为："node_modules/not-bb/src/sass/_mixins.scss"。
最后，you can also create your own UI components by either a) inheriting from NotBBComponent or b) using NotBBComponentFactory. A concrete example of each follows:
最后，你也可以通过继承自 NotBBComponent 或使用 NotBBComponentFactory 来创建你自己的 UI 组件。
继承 NotBBComponent
让我们创建一个简单的自定义按钮组件。
------ ----- ---- ---------
----- ------------ ------- -------------------- -
-------------------- -
---------------
--------- - -------------
------------ - ----------------
-----------------------------
-
-------- -
----- ------ - ---------------------------------
---------------- - ----------
-------------------------------- --------------
------ -------
-
-现在我们可以在你的项目中导入并使用 MyCoolButton 了。例如：
------ ------------ ---- ----------------- ----- -------- - --- -------------- ----- ------ -- ------ -------- -- -- - ------------------- ------- --------- - --- ---------------------------------------------
我们刚刚创建的 MyCoolButton 继承自 NotBBComponent 并且有自己独特的样式。
NotBBComponentFactory
现在我们来看另一种方式创建自定义的 UI 组件 - NotBBComponentFactory。
------ ----- ---- --------- ----- ------------------- - --- --------------------------------------------- - ----- ------ ---- -------- -- -- - ------------------- ------- -------- - --- -------------------------------------------- ----- -------- - -------------------------------------- ---------------------------------------------
与之前例子不同的是，你可以在使用 NotBBComponentFactory 创建新的组件时，为该组件添加默认配置和 CSS 类。
总结
not-bb 是一个非常好用的前端 UI 组件库，它可以让前端开发者在构建 UI 时变得非常简单。通过使用 not-bb ，开发者们可以提高他们的开发效率并且使他们的应用在 UI 方面具有更高的用户体验。
------ ----- ---- --------- ----- -------- - --- -------------- ----- ------ ---- -------- -- -- - ------------------- ----------- - --- ---------------------------------------------
------ ------------ ---- ----------------- ----- -------- - --- -------------- ----- ------ -- ------ -------- -- -- - ------------------- ------- --------- - --- ---------------------------------------------
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055bbc81e8991b448d953c