Introduction
The Plugin Stylesheet is used to apply a style to the Plugin Settings page.
Download from the following link:
51-modern-default.css
.
Alert message
kintoneplugin-alert
Sample Image
Sample Usage
1
2
3
|
<div class="kintoneplugin-alert">
<p>caution !!</p>
</div>
|
Label
kintoneplugin-row
Sample Image
Sample Usage
1
|
<div class="kintoneplugin-row">row</div>
|
kintoneplugin-label
Sample Image
Sample Usage
1
|
<div class="kintoneplugin-label">label</div>
|
kintoneplugin-title
Sample Image
Sample Usage
1
|
<div class="kintoneplugin-title">title</div>
|
kintoneplugin-require
Sample Image
Sample Usage
1
2
3
|
<div class="kintoneplugin-label">require
<span class="kintoneplugin-require">*</span>
</div>
|
kintoneplugin-desc
Sample Image
Sample Usage
1
|
<div class="kintoneplugin-desc">description</div>
|
1
2
3
|
<div class="kintoneplugin-input-outer">
<input class="kintoneplugin-input-text" type="text" />
</div>
|
Check box
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 id="checkbox-0" checked="checked" name="checkbox" type="checkbox" value="0" />
<label for="checkbox-0">checkbox A</label>
</span>
</div>
<div class="kintoneplugin-input-checkbox">
<span class="kintoneplugin-input-checkbox-item">
<input id="checkbox-1" name="checkbox" type="checkbox" value="1"/>
<label for="checkbox-1">checkbox B</label>
</span>
</div>
<div class="kintoneplugin-input-checkbox">
<span class="kintoneplugin-input-checkbox-item">
<input id="checkbox-2" checked="checked" disabled="disabled" name="checkbox" type="checkbox" value="2" />
<label for="checkbox-2">checkbox C</label>
</span>
</div>
<div class="kintoneplugin-input-checkbox">
<span class="kintoneplugin-input-checkbox-item">
<input id="checkbox-3" disabled="disabled" name="checkbox" type="checkbox" value="3" />
<label for="checkbox-3">checkbox D</label>
</span>
</div>
|
Dropdown
kintoneplugin-dropdown-outer, kintoneplugin-dropdown, kintoneplugin-dropdown-selected
Sample Image
Sample Usage
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">drop down</span>
</div>
</div>
</div>
|
kintoneplugin-dropdown-list, kintoneplugin-dropdown-list-item, kintoneplugin-dropdown-list-item-selected
Sample Image
Sample Usage
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">option A</span>
</div>
<div class="kintoneplugin-dropdown-list-item">
<span class="kintoneplugin-dropdown-list-item-name">option B</span>
</div>
<div class="kintoneplugin-dropdown-list-item">
<span class="kintoneplugin-dropdown-list-item-name">option C</span>
</div>
</div>
|
kintoneplugin-select-outer, kintoneplugin-select
Sample Image
Sample Usage
1
2
3
4
5
6
7
8
9
|
<div class="kintoneplugin-select-outer">
<div class="kintoneplugin-select">
<select>
<option>select A</option>
<option>select B</option>
<option>select C</option>
</select>
</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
|
<div class="kintoneplugin-input-radio">
<span class="kintoneplugin-input-radio-item">
<input id="radio-0" checked="checked" name="radio" type="radio" value="0" />
<label for="radio-0">radio A</label>
</span>
<span class="kintoneplugin-input-radio-item">
<input id="radio-1" name="radio" type="radio" value="1" />
<label for="radio-1">radio B</label>
</span>
</div>
|
Table
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
Sample Image
Sample Usage
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">table header</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>
|
1
|
<button class="kintoneplugin-button-normal">button</button>
|
1
|
<button class="kintoneplugin-button-disabled">disabled button</button>
|
1
|
<button class="kintoneplugin-button-dialog-ok">OK</button>
|
1
|
<button class="kintoneplugin-button-dialog-cancel">CANCEL</button>
|
Note
Layouts and styles may look out of place for any future updates that include a change in design. Please note that we cannot assure that the exact same style will be kept after these updates.
