样式表的使用

cybozu发表于:2016年11月28日 18:19:13更新于:2019年02月02日 17:31:05

Index

概要

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

※想要使用新设计风格的时候,可以使用 “51-modern-default.css”。css类名和 “51-classic-default.css” 是一样的。

※显示的范例可能会根据浏览器的设定,部分的显示有变化。
※2016/10/12 CSS的文件名有变化。但是文件的内容没有变更。

消息

kintoneplugin-alert

使用用途

显示注意事项之类的。

使用的范例

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

显示的范例(51-previous-default.css)

001583e872ebfcc715212a3b709493e

显示的范例(51-current-default.css)

001583e874015d3ccb2b05af29fbbda

设定项目

kintoneplugin-row

使用用途

设定项目的行

使用的范例

<div class="kintoneplugin-row">设定项目的行</div>

显示的范例(51-previous-default.css)

001583e998cef8eb0fce8e61f2ba035 

显示的范例(51-current-default.css)

001583e99a096d0ac47a31dbb603b26

kintoneplugin-label

使用用途

设定项目的标题

使用的范例

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

显示的范例(51-previous-default.css)

001583e9c9cd4d5c8cb2d40201c1911

显示的范例(51-current-default.css)

001583e9c9f9e7caf79405f66f89e42

kintoneplugin-require

使用用途

必须项目的标题

使用的范例

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

显示的范例(51-previous-default.css)

001583e9f0faf3669868a607bc4f653

显示的范例(51-current-default.css)

001583e9f164e5cf2375fdc1d3a67dd

文本框

kintoneplugin-input-outer

kintoneplugin-input-text

使用用途

文本框的装饰

使用的范例

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

显示的范例(51-previous-default.css)

001583ea024406a4d40f8930706046f

显示的范例(51-current-default.css)

001583ea02750dfb5c4b9c843ca7de0

复选框

kintone-plugin-input-checkbox

kintone-plugin-input-checkbox-item

使用用途

复选框

使用的范例


<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>

显示的范例(51-previous-default.css)

001583ea15743bf50a7c9f618829f70

显示的范例(51-current-default.css)

001583ea1599db9bb6314cc4d927379

选择菜单

kintoneplugin-dropdown-outer

kintoneplugin-dropdown

kintoneplugin-dropdown-selected

使用用途

选择菜单

使用的范例

显示的范例(51-previous-default.css)

001583ea3bba19277b9241975463080

显示的范例(51-current-default.css)

001583ea3bee61666d57eded3866d76

kintoneplugin-dropdown-list

kintoneplugin-dropdown-list-item.kintoneplugin-dropdown-list-item-selected

kintoneplugin-dropdown-list-item

使用用途

选择菜单的选择列表

使用的范例

<div class="kintoneplugin-dropdown-outer">
    <div class="kintoneplugin-dropdown">
        <div class="kintoneplugin-dropdown-selected"><span class="kintoneplugin-dropdown-selected-name">下拉框</span></div>
    </div>
</div>

显示的范例(51-previous-default.css)

001583ea504ef68628ac7437b60ba71

显示的范例(51-current-default.css)

001583ea5077740f68f594f09af2c3c

kintoneplugin-select-outer

kintoneplugin-select

使用用途

选择菜单+选择列表 ※IE8未对应

使用的范例

<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>

显示的范例(51-previous-default.css)

001583ea61709df66546ea2602958d4

显示的范例(51-current-default.css)

001583ea618ac524a27c5baec39e3cc

单选框

kintoneplugin-input-radio

kintoneplugin-input-radio-item

使用用途

单选框

使用的范例

<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>

显示的范例(51-previous-default.css)

001583ea6d5b12289631719655cb645

显示的范例(51-current-default.css)

001583ea6d98670249f4978fe822e8e

按钮

kintoneplugin-button-normal

使用用途

普通的按钮

使用的范例

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

显示的范例(51-previous-default.css)

001583ea78a87cf8e4485f4aa45694a

显示的范例(51-current-default.css)

001583ea78d5dc8dfa94c2931a4ac3d

kintoneplugin-button-disabled

使用用途

不可使用时的按钮

使用的范例

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

显示的范例(51-previous-default.css)

001583ea8463a2253da79d12036efb1

显示的范例(51-current-default.css)

001583ea84c1aaca5c43621abe399be

kintoneplugin-button-dialog-ok

使用用途

对话框的OK按钮

使用的范例

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

显示的范例(51-previous-default.css)

001583ea940487ef280ca92ef10c309

显示的范例(51-current-default.css)

001583ea9434ae1f41a90277c887188

kintoneplugin-button-dialog-cancel

使用用途

对话框的取消按钮

使用的范例

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

显示的范例(51-previous-default.css)

001583ea9ef3cbe737b82050075c6dd

显示的范例(51-current-default.css)

001583ea9f2077068e4c5d16f773813

注意事项

  • 今后可能由于设计的改变而导致提供样式的框架崩溃,不再与kintone的设计相统一的情况。

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

    您需要登录后才可以回复