什么是 @njakob/breeze?
@njakob/breeze 是一个依赖于 React、react-dom 和 React-Router 的轻量级前端 UI 组件库。它提供了诸如按钮、表单、模态框、标签等常见的 UI 组件，可以快速地为前端应用构建出漂亮的用户界面，提高开发效率。
安装和使用
安装
可以使用 npm 或 yarn 安装 @njakob/breeze：
npm install @njakob/breeze yarn add @njakob/breeze
引入和使用
引入 @njakob/breeze 的方式有两种，一种是按需引入，另一种是全部引入。如果只需要用到部分组件，可以使用按需引入的方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -----------------
----- --- - -- -- -
------ -
-----
------------- -----------
------ ------------- ----------- -- - ----- ---------------
------
--
--
------ ------- ----这里仅引入了 Button 和 Modal 两个组件，@njakob/breeze 会自动按需加载所需的组件代码。
如果需要引入所有组件，可以使用如下方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------------------------
------ - ------- ------ ----- ------ ------- --------- ------ ------- ----- --------- ----- ---- ----------- ------ ------- - ---- -----------------
----- --- - -- -- -
------ -
-----
------------- -----------
------ ------------- ----------- -- - ----- ---------------
------
------ ------------------ ---------- --
------- ------------------- -----------
------- ---------------- ----------
------- ---------------- ----------
------- ---------------- ----------
---------
--------------- -------------
------------- ----------
------- --
-------
------
-------------- ------------
-------------- ------------
-------------- ------------
-------
----------
------------------ ----------------
------------------ ----------------
------------------ ----------------
-----------
------
-------- -------- ---------- -----------
-------- -------- ---------- -----------
-------- -------- ---------- -----------
-------
-------- -------
----------- ---------- ------------- --
------ ----------------- ----------------- --
-------- --------------
------------- -----------
----------
------
--
--
------ ------- ----在这种方式下，需要手动引入组件对应的 CSS。
示例代码
以下是使用 @njakob/breeze 的一个简单示例，通过这个示例可以了解如何使用 Form 和 Modal 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----- ------ ----- - ---- -----------------
----- --- - -- -- -
----- --------- ----------- - ----------------
----- ------ - ---------------
----- --------- - -- -- -
-----------------
--
----- -------- - -- -- -
--------------
--
----- ------------ - -- -- -
------------------
--
----- -------- - -------- -- -
--------------------
------------------
-------------------
--
------ -
-----
------- ------------------- ---------------
---- -----
---------
------ ------------ ------ ----------------- --------------- ------------------------
----- ----------- --------------------
----------
---------------
----------------
--------- --------- ----- -------- ------- ----- ---- ---------- ---
-
------ --
------------
----------
---------------
----------------
--------- --------- ----- -------- ------- ----- ---- ---------- ---
-
--------------- --
------------
-------
--------
------
--
--
------ ------- ----总结
@njakob/breeze 提供了丰富的 UI 组件，可以帮助开发者快速构建漂亮的前端用户界面。@njakob/breeze 还支持按需加载，可以有效减小前端代码的体积。通过本篇文章的介绍和示例，相信读者已经可以很快地上手使用 @njakob/breeze 了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005545881e8991b448d1a2b