Label
Overview
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | No | The object contains params of constructor. |
options.text | String | No | Caption of label. |
options.isRequired | Boolean | No | Display the '*' character at the end of the caption. Default value is false. |
options.textColor | String | No | Color of caption. Can set like 'red' or '#e74c3c' or 'rgba(0, 0, 0, 1)' |
options.backgroundColor | String | No | Color of background. Can set like 'red' or '#e74c3c' or 'rgba(0, 0, 0, 1)' |
options.isDisabled | Boolean | No | The label will be disabled. Default value: 'false' |
options.isVisible | Boolean | No | The label will be visible. Default value: 'true' |
Sample
Javascript
var label = new kintoneUIComponent.Label({
text: 'Name',
textColor: '#e74c3c',
backgroundColor: 'yellow',
isRequired: true
});
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' textColor='#e74c3c' backgroundColor='yellow' isRequired={true} />
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} />
);
}
}
setText(text)
Set the value of text field.
Parameter
Name | Type | Required | Description |
---|---|---|---|
text | String | Yes | Caption of label. If text is undefined, null or true, The label will be displayed blank |
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setText('Name');
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} />
);
}
}
setTextColor(color)
Set color of caption.
Parameter
Name | Type | Required | Description |
---|---|---|---|
color | String | Yes | Color of caption. |
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setTextColor('#e74c3c');
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' textColor='red' />
);
}
}
setBackgroundColor(color)
Set color of background.
Parameter
Name | Type | Required | Description |
---|---|---|---|
color | String | Yes | Color of background. |
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setBackgroundColor('#e74c3c');
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' backgroundColor='yellow' />
);
}
}
setRequired(required)
Set the required for the label.
Parameter
Name | Type | Required | Description |
---|---|---|---|
required | Boolean | Yes | Required option.
|
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.setRequired(true);
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} />
);
}
}
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 label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.on('click', function(event) {
console.log('on click');
});
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} onClick={this.handleClick} />
);
}
handleClick(){
console.log('click');
}
}
show()
Display the Label.
Parameter
None
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.show();
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} isVisible={true} />
);
}
}
hide()
Hide the Label.
Parameter
None
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.hide();
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} isVisible={false} />
);
}
}
disable()
Disabled the Label.
Parameter
None
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.disable();
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} isDisabled={true} />
);
}
}
enable()
Enabled the Label.
Parameter
None
Returns
None
Sample
Javascript
var label = new kintoneUIComponent.Label({text: 'label'});
var body = document.getElementsByTagName("BODY")[0];
body.appendChild(label.render());
label.enable();
React
import { Label } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
render() {
return (
<Label text='Name' isRequired={true} isDisabled={false} />
);
}
}