NPM 包 Kettle-corn 使用教程

阅读时长 86 分钟读完

什么是 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 按钮超链接地址，即将 <button> 元素转化为 元素。如果设置了 href，则会在 onClick 事件与其他行为之后打开链接地址。
target String "_self" No 链接打开的目标窗口。如果 href 是一个 HTTP(S) 地址，则默认为 "_blank"。

Input

Prop Type Default Required Description
id String No 与 input 绑定的 ID，可用于 <label> 标记或 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，可用于 <label> 标记或 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<reactelement>/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

相关推荐
精选内容