介绍
@f0c1s/blue 是一个基于 React 的 UI 组件库，包含多个常用组件，如按钮、输入框、表格等，同时提供了强大的扩展能力，使得用户可以自定义组件样式，并支持响应式布局。本文将介绍 @f0c1s/blue 的使用方法，并通过示例代码详细说明如何使用。
安装
@f0c1s/blue 是一个 npm 包，安装非常简单，只需要在终端中输入以下命令即可：
npm install @f0c1s/blue --save
如果你在公司内部使用，可能需要设置 npm 源为公司内部私有源，以提高安装速度和安全性。
使用
在安装完成 @f0c1s/blue 后，可以直接在代码中使用相关组件，例如：
-- -------------------- ---- -------
------ - ------- ----- - ---- --------------
-------- ------------- -
----- ----------- - -- -- -
-----------------------
--
------ -
-----
------ ------------------- --
------- ---------------------------------
------
--
-在代码中，我们通过 import 引入了 Button 和 Input 两个组件，并在 MyComponent 中使用。其中，Button 组件有一个 onClick 属性，用于指定点击事件的回调函数。Input 组件有一个 placeholder 属性，用于指定输入框的占位符文本。
以上仅是一个简单的示例，后续文章将介绍更多组件的使用方法。
引入样式
@f0c1s/blue 提供了默认的样式，我们可以在代码中引入该样式，以便样式正确渲染。具体方式如下：
import '@f0c1s/blue/dist/index.css';
在代码中使用该语句后，即可自动引入默认的样式。
组件列表
@f0c1s/blue 包含的组件如下：
- Button：按钮组件
- Icon：图标组件
- Input：输入框组件
- Form：表单组件
- Table：表格组件
- Select：选择器组件
- Modal：模态框组件
- Drawer：抽屉组件
- Collapse：折叠面板组件
- Progress：进度条组件
- Notification：通知组件
- Message：消息组件
- Alert：警告框组件
以上组件在实际开发中都有着广泛的应用，后文将详细介绍每个组件的使用方法，并提供示例代码。
Button
Button 组件是一个简单的按钮组件，可以自定义按钮文本、样式和点击事件。
- text：按钮文本，类型为字符串。
- type：按钮类型，包含 primary、danger、warning、success 和 default 五种，默认值为 default。
- onClick：点击事件回调函数，类型为函数。
示例代码如下：
-- -------------------- ---- -------
------ - ------ - ---- --------------
-------- ------------- -
----- ----------- - -- -- -
-----------------------
--
------ -
------- -------------- ----------------------
--
---------
--
-在这个示例代码中，我们创建了一个名为 MyComponent 的函数组件，并在其中使用了 Button 组件。Button 组件的 type 属性设置为 primary，表示将该按钮设置为主要按钮，其他属性即使用了默认值。
Icon
Icon 组件是一个简单的图标组件，包含多个常见图标。
- type：图标类型，类型为字符串。
示例代码如下：
import { Icon } from '@f0c1s/blue';
function MyComponent() {
return (
<Icon type="check" />
);
}在这个示例代码中，我们创建了一个名为 MyComponent 的函数组件，并在其中使用了 Icon 组件。Icon 组件的 type 属性设置为 check，表示显示一个选中的复选框图标。
Input
Input 组件是一个简单的输入框组件，可以自定义输入框文本、样式和输入事件。
- placeholder：输入框占位符文本，类型为字符串。
- onChange：输入事件回调函数，类型为函数。
示例代码如下：
-- -------------------- ---- -------
------ - ----- - ---- --------------
-------- ------------- -
----- ------------ - ------- -- -
--------------------------------
--
------ -
------ ------------------- ----------------------- --
--
-在这个示例代码中，我们创建了一个名为 MyComponent 的函数组件，并在其中使用了 Input 组件。Input 组件的 placeholder 属性设置为 “请输入内容”，表示该输入框的占位符文本为该文本。Input 组件的 onChange 属性设置为 handleChange 函数，该函数在输入框内容变更时触发，输出变更后的内容到控制台。
Form
Form 组件是一个复杂的表单组件，包含多个输入项和提交按钮，支持表单验证和提交操作。
fields：表单输入项列表，类型为数组。每个输入项由一个对象表示，对象包含以下属性：
- name：输入项名称，类型为字符串。
- label：输入项显示名称，类型为字符串。
- type：输入项类型，包含 input、select、datePicker 等。
- options：选项列表，用于 select 等类型的输入项。类型为数组，数组的每个元素包含以下属性：
- value：选项值，类型为字符串。
- label：选项标签，类型为字符串。
- rules：输入项验证规则，类型为数组。数组的每个元素是一个对象，表示一条验证规则，对象包含以下属性：
- type：验证规则类型，包含 required、maxLength 等。
- message：验证失败时的错误信息，类型为字符串。
- validator：自定义验证器函数，用于更加精细的验证。
onSubmit：提交事件回调函数，类型为函数。
示例代码如下：
-- -------------------- ---- -------
------ - ---- - ---- --------------
-------- ------------- -
----- ------------ - -------- -- -
--------------------
--
----- ------ - -
-
----- -----------
------ ------
----- --------
------ -
- ----- ----------- -------- --------- --
- ----- ------------ ------ --- -------- ---------- -- ---- --
--
--
-
----- ---------
------ -----
----- ---------
-------- -
- ------ ------- ------ --- --
- ------ --------- ------ --- --
--
------ -
- ----- ----------- -------- -------- --
--
--
-
----- -----------
------ -------
----- -------------
------ -
- ----- ----------- -------- ---------- --
--
--
--
------ -
----- --------------- ------------------------
------- -------------------------
-------
--
-在这个示例代码中，我们创建了一个名为 MyComponent 的函数组件，并在其中使用了 Form 组件。Form 组件的 fields 属性设置为包含三个输入项的数组，每个输入项包含名称、标签、类型、选项和验证规则等属性，以及一个 onSubmit 属性，表示提交事件回调函数。当用户在表单中输入内容并点击提交按钮时，会调用 handleSubmit 函数，并传入用户输入的各个输入项的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668ecd9381d61a3540c72