Index

• kintone UI Component是什么

• 导入方法

• 特征

• 注意事项

• 更新履历

• 结束语

kintone UI Component是什么

kintone UI Component 是类似于 kintone 风格的UI组件的集成库。
可以使用在 kintone 自定义或插件的UI组件开发上。
本文将介绍 kintone UI Component v1 的功能。
在 v1 中，提供了PC版和手机版。
所支持的组件在文档网站 Components 中可供查看。

Github

• https://github.com/kintone-labs/kintone-ui-component

文档

• https://kintone-ui-component.netlify.app

发行说明

• https://kintone-ui-component.netlify.app/docs/en/releases/release-notes-v1.0.0

发行说明中介绍了 V1 的发行背景以及版本升级的内容。

kintone UI Component（v1以后）的支持方针

• 欢迎在GitHub Issue 里提问或提出您的需求。

• 在版权说明的允许的范围内，您可以进行改写代码，再次发行等商业活动。
  版权说明的种类在客户端的库页面或 GitHub 的仓库页面里找到。
  但是，因更改源代码而发生的故障不在支持范围内。
  

导入方法

请参考文档网站 Quick Start

 v0 的使用方法请参考 使用“kintone UI Component”轻松创建kintone风格的UI组件。
另外如果您正在考虑升级新版本的话，可以参考 v0 和 v1 写法上的区别。

特征

PC版和手机版各自对应的 UI 组件

不仅仅是PC版，我们也开发了手机版的 UI 组件。
在这里，我们来对Button 和 MobileCheckbox 来做一些介绍。

Button

(() => {
  "use strict";
  // 记录详情页面
  kintone.events.on("app.record.index.show", function (event) {
    const header = kintone.app.getHeaderMenuSpaceElement();
    
    //指定加载的kintone UI Component版本
    const Kuc = Kucs['1.4.0'];
    const button = new Kuc.Button({
      text: "sample",
      type: "submit",
      className: "options-class",
      id: "options-id",
      visible: true,
      disabled: false
    });
    header.appendChild(button);
    
    button.addEventListener("click", function (event) {
      console.log(event);
    });
    return event;
  });
})();

MobileCheckbox

(() => {
  "use strict";
  kintone.events.on("mobile.app.record.detail.show", function (event) {
    const space = kintone.mobile.app.record.getSpaceElement("mobileSpace");
    
    //指定加载的kintone UI Component版本
    const Kuc = kucs['1.4.0'];
    const checkbox = new Kuc.MobileCheckbox({
      label: "Fruit",
      requiredIcon: true,
      items: [
        {
          label: "orange",
          value: "Orange"
        },
        {
          label: "apple",
          value: "Apple"
        },
      ],
      value: ["Orange"],
      itemLayout: "horizontal",
      className: "options-class",
      id: "options-id",
      visible: true,
      disabled: false,
      borderVisible: true
    });
    space.appendChild(checkbox);
    checkbox.addEventListener("change", function (event) {
      console.log(event);
    });
    return event;
  });
})();

高还原度的 kintone 组件

各组件忠实地再现了 kintone 标准组件的 UI 和动作。
在这里，我们截图比较一下 v1 组件和标准组件。

组件	kintone UI Component	标准组件
Dropdown
Mobile TextArea

通过设置所需的图标显示/隐藏设置，以及设置在空白时显示为输入示例的文本等标准功能也可以实装，非常方便。

在属性中申明

用属性的方式申明并保存组件的值，可以使用 JavaScript 标准函数来编写代码。
由于和 JavaScript 的写法类似，使得开发新手和习惯开发的人都可以非常方便的使用。

代码范例

const kintoneHeaderSpace = kintone.app.getHeaderMenuSpaceElement();

//指定加载的kintone UI Component版本
const Kuc = Kucs['1.4.0'];
const button = new Kuc.Button({
  text: "sample"
});
button.text = "update";
kintoneHeaderSpace.appendChild(button);

ClassName、ID 的指定

各组件的 ClassName 和 ID 都可以分别指定。
通过对各个件分别设置 CSS，以达到微调效果。

无障碍

我们对应了键盘操作，语音等无障碍访问功能。
由于各 OS 的设置方法不尽相同，您可以根据所使用的 OS 进行确认。

注意事项

• v1 只提供 JavaScript 版。没有 React 版。

• 各个浏览器的兼容性请参考浏览器对应状况。

更新履历

有关功能更新历史记录和最新信息（包括将来添加兼容组件），请参阅以下开发页面。

• GitHub Releases: https://github.com/kintone-labs/kintone-ui-component/releases

• 发行说明: https://kintone-ui-component.netlify.app/docs/en/releases/release-notes

本文更新履历如下：

• 2022年8月10日
  从v1.4.0起，通过指定kintone UI Component 的版本，并用该版本的Kucs 对象生成 Kuc对象的方式，可以导入多个版本的 kintone UI Component 了。
  详情请参考：Version conflicts issue and solution
  本文中的范例代码也做了相应的修改。

结束语

使用kintone UI Component，可以让费时费力的自定义开发成为一件简单的事情。
「自己来制作 kintone 风格的按钮或下拉框之类的组件会很麻烦吧」，
或是想获得更高效率的开发人士，非常推荐使用本软件。

此Tips在2022年7月版的 kintone 和 kintone UI Component v1.4.0 中确认过。