在前端开发中，UI 组件库是必不可少的，它能够大幅缩短开发时间，提升开发效率。而 "going-ui" 就是一个基于 React 开发的 UI 组件库，它提供了非常多样化的组件和功能，可以轻松应用于你的项目中。
本文就将介绍如何使用 "going-ui" 这个 npm 包。
安装
你可以使用 npm 命令进行安装：
--- ------- --------
引入
安装完成后，你可以使用 ES6 的 import 语句进行引入：
------ - ------- ----- - ---- -----------
组件
"going-ui" 中提供了非常多样化的组件，包括按钮、输入框、表格、弹窗等等。在接下来的章节中，我们将通过一些常用组件的例子来介绍 "going-ui" 的使用方法。
按钮
按钮是应用中使用最频繁的组件之一，"going-ui" 提供了多种样式的按钮。
------ - ------ - ---- ----------- -- ---- ------- ------------------------- -- ---- ------- -------------------------- -- ---- ------- ----------------------- -- ------ ------- -------------- -------------------- -- ----- ------- -------------- -----------------------
按钮的类型可以用 type 属性来指定，支持 'danger', 'primary', 'line'。禁用按钮可以使用 disabled 属性。带图标按钮可以使用 icon 属性。
输入框
输入框也是应用中使用最频繁的组件之一，"going-ui" 也提供了多种样式的输入框。
------ - ----- - ---- ----------- -- ----- ------ ------------------- -- -- ------ ------ ---------------- -- -- ------ ------ ----------------- -- -- ------ ------ ------------- -- -- ----- ------ -------- --
输入框的标签可以使用 addonBefore 和 addonAfter 属性来指定，前缀和后缀文本可以使用 prefix 和 suffix 属性来指定。
表格
表格是展示数据最重要的组件之一，"going-ui" 也提供了丰富的表格组件。
------ - ----- - ---- ----------- ----- ------- - - - ------ ----- ---------- ------ -- - ------ ----- ---------- ----- -- - ------ ----- ---------- --------- -- -- ----- ---- - - - ---- ---- ----- ----- ---- --- -------- ------ -- - ---- ---- ----- ----- ---- --- -------- ------- -- -- ------ ----------------- ----------------- --
表格的列可以使用 columns 属性来指定，数据可以使用 dataSource 属性来指定。
弹窗
弹窗是一种常用的操作提示方式，"going-ui" 也提供了多种样式的弹窗组件。
------ - ----- - ---- -----------
-- ---
---------------
------ -------
-------- ----------
------ -
-- --------
--
---------- -
-- --------
--
---
-- ---
------------
------ -------
-------- --------
---
-- ---
-------------
------ -------
-------- --------------
---弹窗的类型可以使用 confirm、info、error 等静态方法来创建。
结语
到此，"going-ui" 的使用教程就介绍完毕了。希望本文能够帮助你更好地使用 "going-ui"，提升你的开发效率。如果你想深入学习该组件库，建议查看官方文档：https://github.com/goingsoft/going-ui 。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006735b890c4f7277583f73