kintone UI Component v1

information

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

目錄

關於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 寫作的區別說明 (External link)
此外,v1 僅提供 JavaScript 版本。沒有 React 版本。

GitHub

https://github.com/kintone-labs/kintone-ui-component (External link)

授權

MIT 授權 (External link)

文件

https://ui-component.kintone.dev/ja/ (External link)

支援政策

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

GitHub Issue 也接受問題和功能請求。
GitHub Issue (External link)

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

Quickstart

文檔網站 快速入門 提供了有關如何入門的說明,並提供了快速入門。
Quickstart (External link)

kintone UI Component的功能

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

在 v1 中,我們將公開桌面版和移動版的 UI 部件。
有關支援的部件的詳細資訊,請查看文件網站 Components。
Components (External link)
下面是 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)也可以反映在自定義中。

功能 5:輔助功能

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

瀏覽器支援

請參閱瀏覽器支援。
瀏覽器支援 (External link)

修訂記錄

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

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

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