Button
Overview
Number | Description |
---|---|
1 | Normal button |
2 | Submit button |
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.text | String | No | Text will be displayed in button. |
options.type | String | No | Style of the button:
|
options.isDisabled | Boolean | No | The button will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The button will be visible. Default value: 'true' |
Sample
Javascript
var button = new kintoneUIComponent.Button({
text: 'Submit',
type: 'submit'
});
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text='Submit' type='submit' isDisabled={false} isVisible={true} />
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text='Submit' type='submit' isDisabled={false} isVisible={true} />
);
}
}
setText(text)
Set displayed text in button.
Parameter
Name | Type | Required | Description |
---|---|---|---|
text | String | Yes | Display text in button |
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setText('submit');
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text='Submit' type='normal' />
);
}
}
setType(type)
Set the displayed type for button.
Parameter
Name | Type | Required | Description |
---|---|---|---|
type | String | No | Style of the button:
|
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.setType('normal');
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text='Submit' type='normal' />
);
}
}
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
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.on('click', function(event) {
console.log('on click');
});
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button onClick={this.handleButtonClick} />
);
}
handleButtonClick = (event) => {
console.log('on click');
}
}
show()
Display button.
Parameter
None
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.show();
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text="button" isVisible={true} />
);
}
}
hide()
Hide button.
Parameter
None
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.hide();
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text="button" isVisible={false} />
);
}
}
disable()
Disable button.
Parameter
None
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.disable();
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text="button" isDisabled={true} />
);
}
}
enable()
Enable button.
Parameter
None
Returns
None
Sample
Javascript
var button = new kintoneUIComponent.Button({text: 'button'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(button.render());
button.enable();
React
import { Button } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Button text="button" isDisabled={false} />
);
}
}