样式表的使用

cybozu • 发表于：2016年11月28日 18:19:13 • 更新于：2020年09月11日 17:14:26

概要

如果大家希望自己的设计和kintone的设计风格相统一，可以在打包的时候，将 "51-modern-default.css" 文件一起打包。将以下类放在想要使用的HTML标签里。

[51-modern-default.css]样式表的对照表

类名称及显示范例使用范例

kintoneplugin-alert


  • 消息及注意事项    
    1001101b-2.png

<div class="kintoneplugin-alert">
 <p>这条消息是注意事项</p>
</div>

kintoneplugin-row


  • 设置项的行
    1001101-01.png

<div class="kintoneplugin-row">设置项目的行A</div>
<div class="kintoneplugin-row">设置项目的行B</div>

kintoneplugin-label


  • 设置项的标题
    1001101f-3.png

<div class="kintoneplugin-label">设置项目的标题</div>

kintoneplugin-title


  • 设置项名称
    1001101f-7.png

<div class="kintoneplugin-title">设置项名称</div>

kintoneplugin-require


  • 必填项符号
    1001101-4.png

<div class="kintoneplugin-title">必填项目的标题<span class="kintoneplugin-require">*</span></div>

kintoneplugin-desc


  • 设置项的说明
    1001101f-8.png

<div class="kintoneplugin-desc">设置项的说明</div>
kintoneplugin-input-outer

kintoneplugin-input-text


  • 文本框的装饰
    1001101-5.png

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

kintoneplugin-input-checkbox-item


  • 复选框
    1001101f-10.png

 <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


  • 选择菜单
    001583ea3bee61666d57eded3866d76

<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


  • 选择菜单的选择列表
    1001101-6.png

<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


  • 选择菜单+选择列表
    1001101f-11.png

<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


  • 单选框
    1001101f-12.png

<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


  • 表格
    1001101-0.png

<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


  • 常规按钮
    001583ea78d5dc8dfa94c2931a4ac3d

<button class="kintoneplugin-button-normal">普通的按钮</button>

kintoneplugin-button-disabled


  • 不可使用时的按钮
    001583ea84c1aaca5c43621abe399be

<button class="kintoneplugin-button-disabled">不可使用时的按钮</button>

kintoneplugin-button-dialog-ok


  • 对话框的OK按钮
    001583ea9434ae1f41a90277c887188

<button class="kintoneplugin-button-dialog-ok">对话框OK按钮</button>

kintoneplugin-button-dialog-cancel


  • 对话框的取消按钮
    001583ea9f2077068e4c5d16f773813

<button class="kintoneplugin-button-dialog-cancel">对话框的取消按钮</button>


注意事项

  • 今后设计有可能发生更改。由此可能导致提供的样式框架崩溃，与kintone的设计风格不协调。

  • 由设计风格的改变而造成的样式变更，我们并不对此提供保障，请大家注意一下。

  • 另外，根据不同的浏览器，可能显示的效果会不一样。

    最多浏览的文档