简介
not-bb 是一个可以用来快速创建相对于 Bootstrap 具有更好体验和更易于自定义的前端 UI 组件的 npm 包。not-bb 不仅可以让你快速构建一个前端应用的 UI 界面，同时也让你可以以自己的独特方式为你的应用量身定制 UI 组件。
not-bb 受到 Bootstrap 的启发，但是它并不是简单的 Bootstrap 修改版。not-bb 基于 CSS 及 Sass，使用 Webpack 进行打包成 npm 包发布。
安装
你可以通过 npm 命令来安装 not-bb：
npm install not-bb
或者你可以使用 yarn 命令来安装：
yarn add not-bb
使用
首先，在你的项目中导入 not-bb 的 CSS 文件：
<link rel="stylesheet" href="node_modules/not-bb/build/style.css">
然后，在你的 JavaScript 模块中，导入 not-bb：
import NotBB from 'not-bb';
使用 not-bb 提供的 UI 组件的方法也非常简单，仅需调用组件的 constructor 即可。例如，你可以以以下方式使用 not-bb 提供的按钮组件：
import NotBB from 'not-bb';
const myButton = new NotBB.Button({
text: 'Click Me',
onClick: () => { console.log('Button Clicked!'); }
});
document.body.appendChild(myButton.render());你应该会看到在你的 web 应用中生成了一个按钮，并且当你点击该按钮时，"Button Clicked!" 信息被打印至控制台。not-bb 提供了许多 UI 组件，包括表格、文本框、模态框、下拉菜单等等。
自定义
not-bb 提供了许多途径让你自定义它的 UI 组件，从而让你的前端应用更符合你或者你的企业的品牌标识。
首先，你可以在 not-bb 的 Sass 变量文件中修改基本的颜色、字体等等的属性。该变量文件路径为：
node_modules/not-bb/src/sass/_variables.scss
其次，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 了。例如：
import MyCoolButton from './MyCoolButton';
const myButton = new MyCoolButton({
text: 'Click Me Too!',
onClick: () => { console.log('Button Clicked Twice!'); }
});
document.body.appendChild(myButton.render());我们刚刚创建的 MyCoolButton 继承自 NotBBComponent 并且有自己独特的样式。
NotBBComponentFactory
现在我们来看另一种方式创建自定义的 UI 组件 - NotBBComponentFactory。
-- -------------------- ---- ------- ------ ----- ---- --------- ----- ------------------- - --- --------------------------------------------- - ----- ------ ---- -------- -- -- - ------------------- ------- -------- - --- -------------------------------------------- ----- -------- - -------------------------------------- ---------------------------------------------
与之前例子不同的是，你可以在使用 NotBBComponentFactory 创建新的组件时，为该组件添加默认配置和 CSS 类。
总结
not-bb 是一个非常好用的前端 UI 组件库，它可以让前端开发者在构建 UI 时变得非常简单。通过使用 not-bb ，开发者们可以提高他们的开发效率并且使他们的应用在 UI 方面具有更高的用户体验。
import NotBB from 'not-bb';
const myButton = new NotBB.Button({
text: 'Click Me',
onClick: () => { console.log('Button Clicked!'); }
});
document.body.appendChild(myButton.render());import MyCoolButton from './MyCoolButton';
const myButton = new MyCoolButton({
text: 'Click Me Too!',
onClick: () => { console.log('Button Clicked Twice!'); }
});
document.body.appendChild(myButton.render());来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bbc81e8991b448d953c