什么是 Kettle-corn？
Kettle-corn 是一款基于 React 的组件库，其中包含了多种常用的 UI 组件，如按钮、输入框、下拉框、表格等等，支持自定义样式和事件处理。
Kettle-corn 的目标是为开发者提供一套高质量的 UI 组件库，避免重复造轮子，减少代码量，提高开发效率。同时，它也是一个开源项目，源码托管在 GitHub 上，可以随时进行二次开发和定制。
如何安装 Kettle-corn
Kettle-corn 是一个 NPM 包，所以我们可以通过 NPM 或 Yarn 来安装。在终端中输入以下命令：
--- ------- ----------- ------ - ---- ----- ---- --- -----------
如何使用 Kettle-corn
Kettle-corn 中的组件都是以 ES6 模块的形式导出的，如果你的项目使用的是模块化的开发方式（例如使用 Webpack 或 Rollup），那么可以直接引入组件：
------ ----- ---- --------
------ - ------ - ---- --------------
------ ------- -------- ------------------ -
------ -
-----
------- ----------- -- -------------------
----- ---
---------
------
--
-如果你使用的是传统的 Script 标签引入方式，需要先使用 Webpack 将 Kettle-corn 打包成一个 UMD 库，然后通过 Script 标签引入：
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
---- ---------------
------- ---------------------------------
--------
--- ------ - ------------------
--- -- - -------------------------------
----------------------- ------------------- - ------------------ -------- ------------- ----
---------
-------
-------Kettle-corn 组件的 Props
Kettle-corn 的组件都会接收一些 Props，并根据这些 Props 来展示不同的 UI。下面是一些常见的 Props：
Button
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | Node | Yes | Btn 的文本内容 | |
| disabled | Boolean | false | No | 是否禁用按钮 |
| type | String | "button" | No | 按钮的类型，可选值为： "button", "submit", "reset" |
| className | String | No | 自定义 Btn 的 class 样式 | |
| onClick | Function | No | 点击 Btn 触发的事件函数 | |
| href | String | No | 按钮超链接地址，即将 元素转化为 元素。如果设置了 href，则会在 onClick 事件与其他行为之后打开链接地址。 | |
| target | String | "_self" | No | 链接打开的目标窗口。如果 href 是一个 HTTP(S) 地址，则默认为 "_blank"。 |
Input
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| id | String | No | 与 input 绑定的 ID，可用于 标记或 QuerySelector 选择器 | |
| name | String | No | input 名称 | |
| type | String | "text" | No | input 的类型，可选值为： "text", "email", "number", "password", "search", "tel", "url", "date", "month", "week", "time", "datetime-local" |
| placeholder | String | No | input 的占位符文本 | |
| value | Any | No | input 的初始值 | |
| defaultValue | Any | No | input 的默认值，仅在使用非受控组件时有效 | |
| onChange | Fucntion | No | input 值改变时触发的回调函数 | |
| onFocus | Fucntion | No | input 获取焦点时触发的回调函数 | |
| onBlur | Fucntion | No | input 失去焦点时触发的回调函数 | |
| readOnly | Boolean | false | No | 是否只读 |
| disabled | Boolean | false | No | 是否禁用 |
| autoFocus | Boolean | false | No | 是否自动获取焦点 |
| maxLength | Number | No | input 允许输入的最大长度 | |
| minLength | Number | No | input 允许输入的最小长度 | |
| autoComplete | String | "on" | No | 是否启用表单自动填充，可选值为： "on", "off" |
| onKeyDown | Fucntion | No | input 键盘按下时触发的回调函数 | |
| onKeyUp | Fucntion | No | input 键盘释放时触发的回调函数 |
Select
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| id | String | No | 与 select 绑定的 ID，可用于 标记或 QuerySelector 选择器 | |
| name | String | No | select 名称 | |
| value | Any | No | select 的初始值 | |
| defaultValue | Any | No | select 的默认值，仅在使用非受控组件时有效 | |
| onChange | Function(event, value) | No | select 值改变时触发的回调函数。event 是一个 SyntheticEvent 实例，value 是选中项的值 | |
| onFocus | Function(event) | No | select 获取焦点时触发的回调函数。event 是一个 SyntheticEvent 实例 | |
| onBlur | Function(event) | No | select 失去焦点时触发的回调函数。event 是一个 SyntheticEvent 实例 | |
| readOnly | Boolean | false | No | 是否只读 |
| disabled | Boolean | false | No | 是否禁用 |
| label | String/Node | No | select 的标签文本 | |
| labelId | String | No | 用于指定 label 元素的 id。如果未传递此选项，则默认为 ${id}-label。在单独关注无障碍性时有用 |
|
| placeholder | String/Node | No | select 的占位符文本 | |
| error | String/Node | No | 表示输入无效的错误消息。这是一个字符串或一个 React 子元素，以在组件下方的空间展示错误信息。与 helperText 可以同时使用 |
|
| required | Boolean | false | No | 选择器是否必填项 |
| helperText | String/Node | No | 与选择器相关的帮助或说明文本。这是一个字符串或一个 React 子元素，可以添加一个较小的文本来描述与组件相关的状态或输入要求等方面。与 error 可以同时使用 |
|
| className | String | No | 自定义 select 的 class 样式 | |
| native | Boolean | false | No | 是否使用 select 原生下拉菜单。如果为 true，则返回一个原生的 <select> 元素而不是一个虚拟 DOM。这对于使用样式库（如 bootstrap）而不是 CSS-in-JS 库（如 Material-UI）的用户非常有用，因为这些样式库需要基本的 select HTML 标记。当 native 为 true 时，属性 defaultValue 和 value 必须是 select 中某个选项的 value 值。 |
| multiple | Boolean | false | No | 是否支持多选 |
| children | Array/String | No | select 的可选项数组或 <optgroup> 和 <option>标签的字符串。如果选项是用数组提供的，则每个项必须为带 value, label 和 key 属性的对象，这些属性用于设置选项的值、和文本以及列表中每个值的唯一标识。如果选项是用未加工数据提供的，则将使用其字符串表示作为选项的值和文本 |
Table
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| columns | Array | Yes | 表格列信息数组 | |
| data | Array | Yes | 表格数据数组，每个元素为一个对象，对象的 key 为每列的数据 key | |
| tableCaption | String | No | 表格的标题 | |
| tableClassName | String | "table" | No | 自定义表格样式的 className |
| columnWidths | Object | No | 指定每列的宽度，可以是一个数字数组，也可以是一个包含 width 属性的对象数组，如果没有指定宽度，列的宽度会自适应调整 | |
| sortBy | String | No | 指定排序的列名，需要配合 sortDirection 属性一起使用，且当 onSort Prop 不为 null 时有效 |
|
| defaultSort | Object | No | 默认排序的参数，键为排序的列名，值为 "asc" 或 "desc" 之一 | |
| sortDirection | "asc" / "desc" | No | 指定排序方向，当 sortBy 属性不为 null 时有效 |
|
| onSort | Function | No | 表格的排序函数，接收两个参数： property 和 direction，分别表示被排序的属性名称和方向（ "asc" 或 "desc"） |
|
| onRowClick | Function | No | 表格内的某一行被点击时的回调函数，接收一个参数，即被点击行的数据对象 | |
| pagination | Boolean | false | No | 是否需要分页功能 |
| perPageOptions | Array | [10, 20] | No | 每页显示数据数量的选项数组 |
| currentPage | Number | 0 | No | 当前页数 |
| onPageChange | Function | No | 页面改变时的回调函数，接收一个参数，即当前页数 | |
| selectable | Boolean | false | No | 是否允许用 checkbox 选择行 |
示例代码
Button
------ ----- ---- --------
------ - ------ - ---- --------------
-------- ------------------ -
------ -
--
------- ----------- -- ------------------------ ------------
------- ----------------- ---------------
------- -----------------------------------
------- ------------------- ---------------------- ------ -- --- -------------
---
--
-Input
------ ----- ---- --------
------ - ----- - ---- --------------
-------- ------------------ -
----- ------- --------- - -------------------
----- ------------ - ------- -- -
-----------------------------
--
------ -
--
------
-----------
----------------
------------------ ---- ---------
-------------
-----------------------
--
------
---------------
----------------
------------------ ---- ---------
-------------- ---------
--------------- ---
--
------
------------
-------------
------------------ ---- ------
--------
----------------- ----- ----- ---- ----- ---- ------ ------
--
------ ----------- ------------- ----- --
---
--
-Select
------ ----- ---- --------
------ - ------ - ---- --------------
-------- ------------------ -
----- ------- --------- - -------------------
----- ------------ - ------- --------- -- -
-------------------
--
------ -
--
-------
----------
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
- ------ --------- ------ -------- --
--
-------------
-----------------------
------------------- - ------
--
-------
----------
- ------ ------ ------ ----- --
- ------ ------- ------ ------ --
- ------ -------- ------ ------- --
- ------ --------- ------ -------- --
--
-------------
-------------
-----------------------
------------- ------ - ------
--
---
--
-Table
------ ----- ---- --------
------ - ----- - ---- --------------
-------- ------------------ -
----- ------- - -
- ---- ----- ------ ----- ------ -- --
- ---- ------- ------ ------- --------- ---- --
- ---- --------- ------ --------- ------ --- --
- ---- -------- ------ -------- ------ ---- --------- ---- --
--
----- ---- - -
- --- -- ----- -------- ------- --------- ------ ------------------- --
- --- -- ----- ------ ------- ------- ------ ----------------- --
- --- -- ----- ---------- ------- ------------- ------ --------------------- --
- --- -- ----- -------- ------- ------- ------ ------------------- --
--
------ -
------
-----------------
-----------
--------------------
----------
----------------- -- -----------------
--
--
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/115823