kintone UI Component v1

連結已複製

本頁面使用機器翻譯而成。
機器翻譯免責聲明

關於kintone UI Component

連結已複製

kintone UI Component是一個庫，可以方便地創建類似kintone的UI部件。
可用於創建自己的kintone表單部件，如kintone自定義、外掛程式UI開發等。

kintone UI Component v0已停止開發，包括安全更新。
以後，建議您遷移到本文介紹的kintone UI Component v1。
如果您正在考慮從 v0 遷移到 v1，請參閱以下關於編寫 v0 和 v1 之間的區別的說明。
v0 和 v1 寫作的區別說明
此外，v1 僅提供 JavaScript 版本。沒有 React 版本。

GitHub

連結已複製

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

授權

連結已複製

MIT 授權

文件

連結已複製

https://ui-component.kintone.dev/ja/

支援政策

連結已複製

如需查看kintone UI Component v1規格或有疑問，可以聯繫API服務台。
有關如何聯繫我們的資訊，請參閱以下頁面。
如何聯繫支持人員

GitHub Issue 也接受問題和功能請求。
GitHub Issue

原始程式碼的修改、再分發和商業用途可根據許可證使用。
您可以在每個用戶端庫的頁面或 GitHub 儲存庫中找到許可證類型。
但是，不支援因變更原始程式碼而引起的麻煩。

Quickstart

連結已複製

文檔網站快速入門提供了有關如何入門的說明，並提供了快速入門。
Quickstart

kintone UI Component的功能

連結已複製

功能 1：桌面版和行動版的 UI 部件

連結已複製

在 v1 中，我們將公開桌面版和移動版的 UI 部件。
有關支援的部件的詳細資訊，請查看文件網站 Components。
Components
下面是 Button 和 MobileCheckbox 的範例。

Button

以下代碼是在記錄檢視介面右側的元素中添加kintone UI Component按鈕的示例代碼。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


(() => {
  'use strict';
  // 相關記錄清單
  kintone.events.on('app.record.index.show', (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', (clickEvent) => {
      console.log(clickEvent);
    });
    return event;
  });
})();

MobileCheckbox

以下代碼為在行動裝置上的記錄詳情介面添加kintone UI Component複選框的範例代碼。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


(() => {
  'use strict';
  kintone.events.on('mobile.app.record.detail.show', (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', (changeEvent) => {
      console.log(changeEvent);
    });
    return event;
  });
})();

特點2：提高kintone零件的再現性

連結已複製

kintone UI Component的元件忠實地再現了kintone的標準UI和行為。
例如，在kintone UI Component中，可以對標準功能進行設置，例如顯示必填專案的圖示或將文本設置為空白輸入示例。

kintone UI Component

kintone 標準

MobileTextArea

kintone UI Component

kintone 標準

功能 3：屬性中的聲明

連結已複製

要存儲在元件中的值在屬性中聲明，可以使用標準 JavaScript 函數進行編碼。
它與 JavaScript 的編寫方式很接近，因此易於使用，即使對於那些剛剛起步的人來說也是如此。

1
2
3
4
5
6
7
8
9


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。
詳細設置（例如為每個部分指定 ClassName 或 ID 以及應用 CSS）也可以反映在自定義中。

連結已複製

每個部分都與鍵盤操作和文本轉語音軟體相容。

瀏覽器支援

連結已複製

請參閱瀏覽器支援。
瀏覽器支援

修訂記錄

連結已複製

kintone UI Component的最新資訊和更新記錄，請查看 GitHub Releases 和 Release Notes。
GitHub Releases
發行說明

2022年8月10日
從v1.4.0開始，可以同時載入多個kintone UI Component。
本文中的示例代碼也進行了重寫，從指定kintone UI Component版本的Kucs物件生成Kuc物件。

本文示例代碼已使用kintone和kintone UI Component v1.4.0的2022年7月版本進行測試。

SDK & Tools