简介
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