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 的區別說明。
此外，v1 僅提供 JavaScript 版本。沒有 React 版本。

GitHub

連結已複製

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

授權

連結已複製

麻省理工學院許可證

公文

連結已複製

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

支援政策

連結已複製

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

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

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

Quickstart

連結已複製

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

kintone UI Component的功能

連結已複製

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

連結已複製

在 v1 中，我們將公開桌面版和移動版的 UI 部件。
有關支援的部件的詳細資訊，請查看文件網站 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 。

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

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

SDK & Tools