简介
在前端开发中，UI 相关的工作非常重要，而一个好用且易于扩展的 UI 组件库也是前端开发必备的部分。本文将介绍一款名为 @proof-ui/core 的 npm 包，该组件库包含了丰富的 UI 组件和工具，可以非常便捷的在 React 项目中使用。
安装
在使用 @proof-ui/core 开始前，我们需要先在项目中安装它。使用 npm 安装可以通过以下命令进行：
npm install @proof-ui/core
另外，为了在项目中使用 @proof-ui/core，我们还需要基于 React 来构建应用。
基础示例
下面我们将介绍如何在 React 项目中引入 @proof-ui/core 并使用其中的组件。首先，我们通过以下代码引入 @proof-ui/core 中的 Button 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------
------ ------- -------- ----- -
------ -
-----
------- ------------------- ----------------
----- --
---------
------
--
-上面代码中的 variant 和 color 属性是 Button 组件中的可配置项。 variant 用于定义 Button 的类型，有 contained 和 outlined 两种取值。 color 用于定义 Button 的颜色，有 primary、secondary、warning、success 和 info 五种取值。
当我们运行该示例后，将得到一个带有文字“Click me” 的蓝色按钮。
常用 UI 组件
@proof-ui/core 中包含了许多常见的 UI 组件，这里介绍一下其中的一些组件。
Icons
@proof-ui/core 中的 Icons 组件包含了多种常用的图标，可以非常方便的在项目中使用。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- ---------- - ---- -----------------
------ ------- -------- ----- -
------ -
-----
--------- --
----------- --
------
--
-上面代码中，我们通过 SaveIcon 和 DeleteIcon 引入了两个图标，通过将其放在 JSX 中，可以轻松的显示出对应的图标。
Checkbox
Checkbox 组件可用于在表单中选择多个选项。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - -------- - ---- -----------------
------ ------- -------- ----- -
----- --------- ----------- - ----------------
----- ------------ - ------- -- -
---------------------------------
--
------ -
-----
---------
-----------------
-----------------------
------------- ------------- -------- --------- --
--
------
--
-上面代码中，我们使用了 React 中的状态管理钩子 useState 来实现 Checkbox 的选中状态的管理，当用户勾选 Checkbox 后，将会触发 handleChange 函数，执行状态的更新。
Snackbar
Snackbar 组件可以用于在界面底部显示提示信息。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- -------- - ---- -----------------
------ ------- -------- ----- -
----- ------ -------- - ----------------
----- ----------- - -- -- -
--------------
--
----- ----------- - ------- ------- -- -
-- ------- --- ------------ -
-------
-
---------------
--
------ -
-----
------- -------------------------- -----------------
---------
-----------
-----------------------
---------------------
------------- -- - ---------
--
------
--
-上面代码中，我们使用了 Button 组件来打开 Snackbar，当用户点击 Open Snackbar 后，Snakcbar 就会在界面底部弹出一个提示信息。 关于 Snackbar 的更多配置，可以查看组件的官方文档。
总结
通过上面的介绍，我们可以看到 @proof-ui/core 组件库提供了丰富的 UI 组件和工具，可以大大提高项目开发的效率。本文介绍了其中的一些常用组件，我们也可以通过查看官网文档，了解更多的用法和配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4073efdbf7be33b2567209