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)

授權

連結已複製

麻省理工學院許可證 (External link)

公文

連結已複製

Quick Start

連結已複製

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

步驟1：準備kintone應用

連結已複製

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

步驟2：創建範例代碼

連結已複製

  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"

步驟3:51-modern-default.css 下載

連結已複製

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

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

步驟4：申請kintone應用

連結已複製

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

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

    • PC用的JavaScript / CSS檔案
      • 範例代碼 （kintone-like-css-sample.js）
    • PC 的 CSS 檔
      • 51-modern-default.css

  2. 在「應用程式設置」頁面中，按兩下更新應用程式。

步驟5：動作確認

連結已複製

  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">checkboxA</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">checkbox 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">checkboxC</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">checkboxD</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">dropdown</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">column 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">對話框中的OK按鈕</button>
取消「對話框按鈕」。
類名
kintoneplugin-button-dialog-cancel
顯示範例

使用範例
1

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

注意事項

連結已複製

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

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