IconButton
Overview
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.type | String | No | The type of of button. The value is one of:
|
options.size | String | No | Size of icon button:
|
options.color | String | No | Color of icon button:
|
options.isDisabled | Boolean | No | The icon button will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The icon button will be visible. Default value: 'true' |
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' />
);
}
}
Javascript
var insertBtn = new kintoneUIComponent.IconButton({type: 'insert',color:'blue', size: 'small'});
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
setType(type)
Set the type of the button.
Parameter
Name | Type | Required | Description |
---|---|---|---|
type | String | No | The type of of button. The value is one of:
|
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' type='remove'/>
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setType('remove');
setSize(size)
Change size of icon button.
Parameter
Name | Type | Required | Description |
---|---|---|---|
size | String | No | The size of of button. The value is one of:
|
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.setSize('small');
on(eventName, callback)
Register callback for click event
Parameter
Name | Type | Required | Description |
---|---|---|---|
eventName | String | Yes | Name of event:
|
callback | function | Yes | callback |
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' onClick={this.handleClick} />
);
}
handleClick() {
console.log('on click');
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.on('click', function(event) {
console.log('on click');
});
show()
Display the icon button.
Parameter
None
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' isVisible={true} />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.show();
hide()
Hide the icon button.
Parameter
None
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' isVisible={false} />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.hide();
disable()
Disabled the icon button.
Parameter
None
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' isDisabled={true} />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.disable();
enable()
Enabled the icon button.
Parameter
None
Returns
None
Sample
React
import { IconButton } from 'kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<IconButton type='insert' size='small' color='blue' isDisabled={false} />
);
}
}
Javascript
var iconBtn = new kintoneUIComponent.IconButton({type: 'insert'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(iconBtn.render());
iconBtn.enable();