Index
kintone UI Component是什么
kintone UI Component 是类似于 kintone 风格的UI组件的集成库。
可以使用在 kintone 自定义或插件的UI组件开发上。
另外，kintone UI Component v0 已不再维护，包括安全升级。
建议使用了kintone UI Component v0 换成 kintone UI Component v1。
改写时您可以参考 v0 和 v1 写法上的区别。
Github
许可证
文档
kintone UI Component（v1以后）的支持方针
欢迎在GitHub Issue 里提问或提出您的需求。
在版权说明的允许的范围内，您可以进行改写代码，再次发行等商业活动。
版权说明的种类在客户端的库页面或 GitHub 的仓库页面里找到。
但是，因更改源代码而发生的故障不在支持范围内。
导入方法
请参考文档网站 Quick Start
kintone UI Component 特征
特征 1 ：PC 版和手机版各自对应的 UI 组件
不仅仅是PC版，我们也开发了手机版的 UI 组件。
关于具体可支持哪些组件，请查看文档Components。
在这里，我们来对Button 和 MobileCheckbox 来做一些介绍。
Button
下面的代码是在记录列表页面的菜单右侧的元素中，插入 kintone UI Component 的按钮。
(() => {
"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
下面的代码是在手机版的记录详情页面，插入 kintone UI Component 的复选框。
(() => {
"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;
});
})();特征2 ： 高还原度的 kintone 组件
各组件忠实地再现了 kintone 标准组件的 UI 和动作。
通过设置所需的图标显示/隐藏设置，以及设置在空白时显示为输入示例的文本等标准功能也可以实装，非常方便。
| 组件 | kintone UI Component | 标准组件 |
|---|---|---|
| Dropdown | ||
| Mobile TextArea |
特征3 : 在属性中申明
用属性的方式申明并保存组件的值，可以使用 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);特征4 : ClassName、ID 的指定
各组件的 ClassName 和 ID 都可以分别指定。
通过对各个件分别设置 CSS，以达到微调效果。
无障碍
我们对应了键盘操作，语音等无障碍访问功能。
由于各 OS 的设置方法不尽相同，您可以根据所使用的 OS 进行确认。
浏览器的支持情况
各个浏览器的兼容性请参考浏览器对应状况。
更新履历
有关功能更新历史记录和最新信息（包括将来添加兼容组件），请参阅以下开发页面。
GitHub Releases: https://github.com/kintone-labs/kintone-ui-component/releases
本文更新履历如下：
2022年8月10日
从v1.4.0起，可同时使用多个版本的 kintone UI Component 。
通过指定kintone UI Component 的版本，并用该版本的Kucs 对象生成 Kuc对象的方式，可以导入多个版本的 kintone UI Component 了。
本文中的范例代码也做了相应的修改。
此Tips在2022年7月版的 kintone 和 kintone UI Component v1.4.0 中确认过。