在前端开发中，组件化是一种十分常见的设计方式。而当多个项目中都有相似的需求时，我们便会将这些通用组件封装成一个 npm 包以便后续使用。而 opiece-react-components 正是一个非常优秀的 react 组件库。
opiece-react-components 简介
opiece-react-components 是一个基于 react 开发的 UI 组件库，该组件库包含了众多通用组件以及针对特定场景所设计的一些组件。使用该组件库，开发者可以轻松的构建精美的 UI 界面，并提高开发效率。
opiece-react-components 目前支持以下组件：
- Button: 按钮组件
- Icon: 图标组件
- Form: 表单组件
- Table: 表格组件
- Modal: 弹窗组件
- Tabs: 选项卡组件
- Loading: 加载组件
- Progress: 进度条组件
- Carousel: 轮播图组件
- Notification: 通知组件
- Tooltip: 提示组件
安装 opiece-react-components
npm 安装
在项目根目录下，运行以下命令即可安装 opiece-react-components：
npm install opiece-react-components --save
直接引入
如果您未使用 npm 包管理器，也可以通过从 CDN 引入 opiece-react-components：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/opiece-react-components/dist/opiece-react-components.min.css"> <script src="https://cdn.jsdelivr.net/npm/opiece-react-components/dist/opiece-react-components.min.js"></script>
使用 opiece-react-components
在引入 opiece-react-components 后，我们可以直接使用组件库中的组件，以下是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- --------------------------
----- --- ------- --------------- -
-------- -
------ -
-----
---------------------
------
--
-
-
-------------------- --- ---------------------------------此时，您应该可以看到一个默认的按钮出现在您的页面上。
组件说明
Button
Button 是一个通用的按钮组件，它支持多种形态的按钮。
-- -------------------- ---- ------- ------ - ------ - ---- -------------------------- --------------------- -- ----- ------- --------------------------- ------- -------------------------- ------- --------------------------- ------- ------------------------- ------- -------------------------
Icon
Icon 是一个通用的图标组件，可以使用 fontawesome 提供的图标进行渲染。
import { Icon } from 'opiece-react-components';
<Icon type="home" />
// 支持的属性
<Icon type="loading" spin />
<Icon type="search" rotate={90} />
<Icon type="home" flip="horizontal" />Form
Form 是一个表单组件，支持多种类型表单元素的渲染。
-- -------------------- ---- -------
------ - ----- ------ ------ - ---- --------------------------
------
-----------
------ ----------- -------------------- --
------------
-----------
------ --------------- ------------------- --
------------
-----------
------- --------------------------
------------
-------Table
Table 是一个表格组件，支持多种类型的表格和分页，还可以通过数据接口渲染数据。
-- -------------------- ---- -------
------ - ----- - ---- --------------------------
----- ------- - -
-
------ -----
---------- -----
---- -----
--
-
------ ------
---------- -----------
---- -----------
--
-
------ -----
---------- --------
---- --------
--
--
----- ---------- - -
-
--- --
--------- ---------
------ -----------------
--
-
--- --
--------- ----------
------ ------------------
--
--
------ ----------------- ----------------------- --Modal
Modal 是一个通用的弹窗组件，支持多种类型的弹窗，如成功、失败、消息等。
import { Modal } from 'opiece-react-components';
<Modal visible={visible} title="成功" type="success" onOk={this.handleOk}>
操作成功！
</Modal>Tabs
Tabs 是一个选项卡组件，支持多种样式选项卡和手势切换。
-- -------------------- ---- -------
------ - ---- - ---- --------------------------
----- ---------------------
------------- -------- -- --------
----- -
---------------
------------- -------- -- --------
----- -
---------------
-------Loading
Loading 是一个通用的加载组件，支持多种加载状态和类型。
import { Loading } from 'opiece-react-components';
<Loading type="circle" color="#000" size={60} />
<Loading type="square" color="#000" size={60} />Progress
Progress 是一个进度条组件，支持多种类型进度条。
import { Progress } from 'opiece-react-components';
<Progress type="line" percent={50} />
<Progress type="circle" percent={75} />
<Progress type="dashboard" percent={90} />Carousel
Carousel 是一个轮播图组件，支持多种轮播类型和动画过渡。
-- -------------------- ---- -------
------ - -------- - ---- --------------------------
----------
-----
----------
------
-----
----------
------
-----
----------
------
-----
----------
------
-----------Notification
Notification 是一个通用的通知组件，支持多种通知类型。
import { Notification } from 'opiece-react-components';
Notification.success({
message: '操作成功',
description: '这是一条成功的消息通知。',
});Tooltip
Tooltip 是一个通用的提示组件，支持多种弹出方式。
import { Tooltip } from 'opiece-react-components';
<Tooltip title="我是提示文字">
<span>鼠标移上来查看提示文字</span>
</Tooltip>到此，opiece-react-components 组件库已经简单使用完毕，更多组件、属性及用法请详见官网或源码。
结语
通过学习本篇文章，您应该已经掌握了 opiece-react-components 组件库的基本使用方法，可以使用 opiece-react-components 快速打造精美的 UI 界面，提高开发效率。如果您想深入学习 react，可以点击这里阅读 react 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdf81e8991b448e68ff