SDK & Tools

51-modern-default

information

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

目錄

關於51-modern-default

連結已複製

51-modern-default是UI部件的樣式表（CSS），與kintone的設計相協調。

GitHub

連結已複製

https://github.com/kintone-samples/plugin-samples/blob/master/stylesheet/51-modern-default.css (External link)

授權

連結已複製

MIT 授權 (External link)

文件

連結已複製

Quick Start

連結已複製

這是在記錄清單功能表右側的kintone中增加一個和諧按鈕的自定義設置。

Step1：準備kintone應用

連結已複製

創建kintone應用。
您無需放置任何欄位。

STEP2：創建範例代碼

連結已複製

  1. 將以下內容貼上到文字編輯器中：

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

    /*
* 51-modern-default sample
*
* Licensed under the MIT License
* https://opensource.org/license/mit/
*/

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', async (event) => {
    // 獲取記錄清單功能表右側的元素
    const headerSpace = kintone.app.getHeaderMenuSpaceElement();

    const button = document.createElement('button');
    button.textContent = 'Hello kintone';
    button.className = 'kintoneplugin-button-normal';
    headerSpace.appendChild(button);

    return event;
  });
})();

  2. 將字元編碼設置為「UTF-8」，將檔擴展名設置為「. js」並保存檔。
    在本文中，檔名為「kintone-like-css-sample.js」。

STEP3：下載51-modern-default.css

連結已複製

  1. 將51-modern-default.css的內容粘貼到文字編輯器中。
    51-modern-default.css (External link)

  2. 將字元編碼設置為「UTF-8」，將檔擴展名設置為「.css」並保存檔。
    在本文中，檔名為「51-modern-default.css」。

STEP4：申請kintone應用

連結已複製

將kintone自定義檔應用到STEP1中創建的應用中。
有關詳細說明，請參閱使用JavaScript和 CSS 自定義應用。
使用 JavaScript 和 CSS 自定義應用 (External link)

  1. 指定包含以下內容的自訂檔案：

    • JavaScript檔（電腦專用）
      • 範例代碼 （kintone-like-css-sample.js）
    • CSS檔（電腦專用）
      • 51-modern-default.css

  2. 在「應用程式設置」頁面中，點擊【更新應用程式】。

STEP5：動作確認

連結已複製

  1. 打開已應用自定義的應用程式的清單畫面。

  2. 確保與kintone匹配的樣式應用於功能表右側空間中插入的按鈕。

公文

連結已複製

警報消息

連結已複製

顯示警示通知
類名
kintoneplugin-alert
顯示範例

使用範例
1
2
3

<div class="kintoneplugin-alert">
  <p> 此消息是一個警告說明。 </p>
</div>

標籤

連結已複製

配置項目行
類名
kintoneplugin-row
顯示範例

使用範例
1
2

<div class="kintoneplugin-row">設置項的行A</div>
<div class="kintoneplugin-row">設置項的行B</div>
設置項目標題
類名
kintoneplugin-label
顯示範例

使用範例
1

<div class="kintoneplugin-label">設置專案的標題</div>
設置項目名稱
類名
kintoneplugin-title
顯示範例

使用範例
1

<div class="kintoneplugin-title">設定項目名</div>
必填欄位標記
類名
kintoneplugin-require
顯示範例

使用範例
1

<div class="kintoneplugin-title">設定項目名<span class="kintoneplugin-require">*</span></div>
設置項目說明
類名
kintoneplugin-desc
顯示範例

使用範例
1

<div class="kintoneplugin-desc">設置項目說明</div>

文字框

連結已複製

文字框
類名
kintoneplugin-input-outer
kintoneplugin-input-text
顯示範例

使用範例
1
2
3

<div class="kintoneplugin-input-outer">
  <input class="kintoneplugin-input-text" type="text">
</div>

核取方塊

連結已複製

核取方塊
類名
kintoneplugin-input-checkbox
kintoneplugin-input-checkbox-item
顯示範例

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

<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="0" id="checkbox-0" checked="">
    <label for="checkbox-0">核取方塊A</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="1" id="checkbox-1">
    <label for="checkbox-1">核取方塊B</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="2" id="checkbox-2" checked="" disabled="">
    <label for="checkbox-2">核取方塊C</label>
  </span>
</div>
<div class="kintoneplugin-input-checkbox">
  <span class="kintoneplugin-input-checkbox-item">
    <input type="checkbox" name="checkbox" value="3" id="checkbox-3" disabled="">
    <label for="checkbox-3">核取方塊D</label>
  </span>
</div>

連結已複製

類名
kintoneplugin-dropdown-outer
kintoneplugin-dropdown
kintoneplugin-dropdown-selected
顯示範例

使用範例
1
2
3
4
5
6
7

<div class="kintoneplugin-dropdown-outer">
  <div class="kintoneplugin-dropdown">
    <div class="kintoneplugin-dropdown-selected">
      <span class="kintoneplugin-dropdown-selected-name">下拉式選單</span>
    </div>
  </div>
</div>
類名
kintoneplugin-dropdown-list
kintoneplugin-dropdown-list-item
kintoneplugin-dropdown-list-item-selected
kintoneplugin-dropdown-list-item-name
顯示範例

使用範例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="kintoneplugin-dropdown-list">
  <div class="kintoneplugin-dropdown-list-item kintoneplugin-dropdown-list-item-selected">
    <span class="kintoneplugin-dropdown-list-item-name">選項A</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">選項B</span>
  </div>
  <div class="kintoneplugin-dropdown-list-item">
    <span class="kintoneplugin-dropdown-list-item-name">選項C</span>
  </div>
</div>
類名
kintoneplugin-select-outer
kintoneplugin-select
顯示範例

使用範例
1
2
3
4
5
6
7
8
9

<div class="kintoneplugin-select-outer">
  <div class="kintoneplugin-select">
      <select>
        <option>選擇A</option>
        <option>選擇B</option>
        <option>選擇C</option>
      </select>
  </div>
</div>

選項按鈕

連結已複製

選項按鈕
類名
kintoneplugin-input-radio
kintoneplugin-input-radio-item
顯示範例

使用範例
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="kintoneplugin-input-radio">
  <span class="kintoneplugin-input-radio-item">
    <input type="radio" name="radio" value="0" id="radio-0" checked="">
    <label for="radio-0">選項按鈕A</label>
  </span>
  <span class="kintoneplugin-input-radio-item">
    <input type="radio" name="radio" value="1" id="radio-1">
    <label for="radio-1">選項按鈕B</label>
  </span>
</div>

表格

連結已複製

表格
類名
kintoneplugin-table
kintoneplugin-table-th
kintoneplugin-table-th-blankspace
kintoneplugin-table-td-control
kintoneplugin-table-td-control-value
kintoneplugin-table-td-operation
kintoneplugin-button-add-row-image
kintoneplugin-button-remove-row-image
顯示範例

使用範例
 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

<table class="kintoneplugin-table">
  <thead>
    <tr>
      <th class="kintoneplugin-table-th"><span class="title">列標題</span></th>
      <th class="kintoneplugin-table-th-blankspace"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="kintoneplugin-table-td-control">
          <div class="kintoneplugin-table-td-control-value">
            <div class="kintoneplugin-input-outer">
              <input class="kintoneplugin-input-text" type="text">
            </div>
          </div>
        </div>
      </td>
      <td class="kintoneplugin-table-td-operation">
        <button type="button" class="kintoneplugin-button-add-row-image" title="Add row"></button>
        <button type="button" class="kintoneplugin-button-remove-row-image" title="Delete this row"></button>
      </td>
    </tr>
  </tbody>
</table>

按鈕

連結已複製

普通按鈕
類名
kintoneplugin-button-normal
顯示範例

使用範例
1

<button class="kintoneplugin-button-normal">普通按鈕</button>
不可用按鈕
類名
kintoneplugin-button-disabled
顯示範例

使用範例
1

<button class="kintoneplugin-button-disabled">不可用按鈕</button>
對話框中的「確定」 按鈕
類名
kintoneplugin-button-dialog-ok
顯示範例

使用範例
1

<button class="kintoneplugin-button-dialog-ok">對話框確定按鈕</button>
取消對話框按鈕
類名
kintoneplugin-button-dialog-cancel
顯示範例

使用範例
1

<button class="kintoneplugin-button-dialog-cancel">取消對話框按鈕</button>

注意事項

連結已複製

  • 根據您的瀏覽器設置，它可能看起來與它顯示的示例不同。
  • kintone的更新可能會擾亂您提供的樣式的佈局，或者可能與kintone的設計不匹配。
    information

    本文介紹的示例代碼已在kintone的2022年5月版本中進行了測試。