随着前端开发的进步，我们需要处理更多的复杂业务，前端 UI 组件的重用也变得越来越必要。这时候，npm 包来帮忙啦！在这篇文章中，我们将介绍一个 npm 包 - react-selfuse-ui，它提供了一套可定制的 React UI 组件。
安装
你可以直接通过 npm 安装它：
npm install react-selfuse-ui --save
使用
安装完成之后，在你的 React 应用中导入需要的组件即可使用：
-- -------------------- ---- -------
------ - ------ - ---- -------------------
-------- ----- -
------ -
-----
-------
--------------
----------- -- -
-----------------------
--
-
---
---------
------
--
-组件
react-selfuse-ui 提供了多个组件，我们下面一个一个来看。示例代码均为 TypeScript。
Button
Button 组件是一个可点击的按钮，可以设置不同的类型与尺寸。
-- -------------------- ---- -------
------ - ------- ----------- - ---- -------------------
----- ---- -------- - -- -- -
----- ------------ ---------------------- - -- -- -
------------------------
--
------ -
-----
------- ----------------------------- ---------------
------- -------------- ----------------------
------- ------
---------
------- ------------- ----------------------
------ ------
---------
------- ------------- ----------------------
------ ------
---------
------- ----------- --------------------------------------
---- ------
---------
------
--
--Alert
Alert 组件用于展示一些提示信息，可以设置不同的类型。
-- -------------------- ---- -------
------ - ------ ---------- - ---- -------------------
----- ---- -------- - -- -- -
------ -
--
------ ------------- ----- ----------- --
------ ---------------- ----- -------------- --
------ ---------------- ----- -------------- --
------ -------------- ----- ------------ --
---
--
--Badge
Badge 组件用于展示一些提示信息，可以设置不同的类型与计数。
-- -------------------- ---- -------
------ - ------ ---------- - ---- -------------------
----- ---- -------- - -- -- -
------ -
--
----------------------
------ ----------------- ---- -------------
------ ----------- ---- -----------
------ ------------------------------
------ -------------- ----------
------- ---- -----
--------
------ -------------- ----
------- ---- ---
--------
------ ------------------------------
------ ------------------------------
------ --------------------------
---
--
--Modal
Modal 组件用于展示一个模态弹窗，可以根据实际需要设置标题、内容及底部按钮。
-- -------------------- ---- -------
------ - ------ ------ - ---- -------------------
----- ---- -------- - -- -- -
----- --------- ----------- - ----------------
------ -
--
------- ----------- -- -------------------- --------------
------
------------ ---
-----------------
-------- -- ------------------
------------ -- ------------------
-
-------- ---------
-------- ---------
--------
---
--
--总结
react-selfuse-ui 提供了一套简洁易用的 React UI 组件，可以方便地应用到项目中，减少重复工作量。本文介绍了该组件库提供的常用组件及使用方法，希望能为大家提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66cc7