简介
wrench-sui 是一个基于 React 的 UI 组件库，提供了一系列常用的组件，如 button、input、dialog 等等。使用 wrench-sui 能够快速的搭建前端页面，减少前端开发的时间成本。
安装
在项目中使用 wrench-sui 需要先安装它。可以通过 npm 的方式进行安装，打开终端输入以下命令：
npm install wrench-sui
使用
安装完成后，就可以在项目中使用组件了。在需要的地方引入组件即可，例如要使用 button 组件，可以在组件中这样写：
-- -------------------- ---- -------
------ - ------ - ---- -------------
-------- ----- -
------ -
-----
------------- -----------
------
--
-可以看到，在 jsx 语法下，我们引入了 wrench-sui 中的 Button 组件，并将它作为一个标签使用了。在组件内部可以传入一些 props，配置组件的一些基本属性，如下：
<Button size="large" type="primary" onClick={handleClick}>Click me</Button>组件列表
wrench-sui 中包含了以下常用的组件：
Button
按钮组件，支持设置大小、颜色和点击事件等属性。
Input
输入框组件，支持设置默认值和事件监听等属性。
Dialog
对话框组件，可以根据需要设置标题、内容和按钮等属性。
示例代码
下面是一个使用 wrench-sui 搭建一个登录页面的代码示例：
-- -------------------- ---- -------
------ - ------- ------ ------ - ---- -------------
-------- ----------- -
----- ---------- ------------ - -------------
----- ---------- ------------ - -------------
----- ----------- - -- -- -
-- --------- --- ------- -- -------- --- --------- -
-------------
------ -------
-------- --------
----- -- -- -
-- --------
-
---
- ---- -
-------------
------ -------
-------- ----------------
--------- -- -- -
-- --------
-
---
-
--
------ -
-----
-------------
------
-----
------------------
------ ---------------- ----------- -- ---------------------------- --
------
-----
------------------
------ --------------- ---------------- ----------- -- ---------------------------- --
------
------- -------------- ---------------------------------
-------
------
--
-可以看到，在这个页面中我们使用了 wrench-sui 中的 Button、Input 和 Dialog 组件，将它们结合起来实现了一个登录页面。使用 wrench-sui 能够快速的搭建前端页面，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162539