IconButton

Overview

IconButton

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:
  • 'insert'
  • 'remove'
  • 'close'
Default value is 'insert'.
options.size String No Size of icon button:
  • 'large'
  • 'small'
Default value is 'large'.
options.color String No Color of icon button:
  • 'gray'
  • 'blue'
  • 'red'
  • 'green'
Default value is 'gray'.
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:
  • 'insert'
  • 'remove'
  • 'close'
Default value is 'insert'.

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:
  • 'normall'
  • 'small'
Default value is 'normal'.

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:
  • 'click'
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();