Tabs
Overview
Number | Description |
---|---|
1 | Selected Tab |
2 | Not selected Tab |
3 | Disabled Tab |
4 | Tab content |
Constructor
Parameter
Name | Type | Required | Description |
---|---|---|---|
options | Object | Yes | An object contains params of constructor. |
options.items | Array<Object> | No | List of tabs. |
options.columns[x].tabName | String | Yes | Name of a tab. |
options.columns[x].tabContent | String | No | The value of an item. |
options.columns[x].isDisabled | Boolean | No | Indicate if tab will be disabled. Default value: 'false' |
options.value | Integer | No | Index of selected tab. |
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: "This is Tab1"
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
</div>
);
}
}
Methods
render()
Get dom element of component.
Parameter
None
Returns
Dom element
Sample
Javascript
var button = new kintoneUIComponent.Button({
text: 'Hello',
type: 'submit'
});
button.on('click',function(e){
alert('hello')
})
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: button.render()
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement()
el.appendChild(tab.render());
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
addItem(item)
Add an item to end of the tab list.
Parameter
Name | Type | Required | Description |
---|---|---|---|
item | Object | Yes | The new tab to be added. |
item.tabName | String | Yes | Name of the new tab. |
item.tabContent | String | No | Content of the new tab. |
item.isDisabled | Boolean | No | Indicate tab will be disabled when display. Default value: 'false'. |
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
var item = { tabName: "Tab4", tabContent: "This is Tab4", isDisabled: true };
el.appendChild(tab.render());
tab.addItem(item);
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
const item = { tabName: "Tab4", tabContent: "This is Tab4", isDisabled: true };
this.setState(prevState => ({
items: prevState.items ? prevState.items.concat([item]) : [item]
}))
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Add Item</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
removeItem(index)
Remove item at specific index of tab list.
Parameter
Name | Type | Required | Description |
---|---|---|---|
index | Interger | Yes | The position of tab to be removed. If the index does not define a position in the Item, No item will be removed. |
Returns
None
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
tab.removeItem(0);
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
this.setState(prevState => {
if (prevState.items) {
return prevState.items.splice(0, 1);
}
return prevState;
});
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Remove Item</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
getItems()
Get all tabs.
Parameter
None
Return
The array contains all tabs.
Name | Type | Description |
---|---|---|
items | Array<Object> | The new tab to be added. |
items[].tabName | String | Name of the new tab. |
items[].tabContent | String | Content of the tab. |
items[].isDisabled | Boolean | Indicate tab is disabled when display. |
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
var items = tab.getItems();
items.forEach(function(item) {
console.log(item);
});
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
this.state.items.forEach(item => {
console.log(item);
});
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Get Items</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
getValue()
Get index of selected item.
Parameter
None
Return
Name | Type | Description |
---|---|---|
value | Interger | The selected tab index. |
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
console.log(tab.getValue());
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1',
isDisabled: true
},
{
tabName: "Tab2",
tabContent: "This is Tab2",
isDisabled: false
},
{
tabName: "Tab3",
tabContent: "This is Tab3",
isDisabled: true
}
];
this.state = {
items: items,
value: 0
};
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} onSelect={(item, index) => {this.setState({value: index})}} />
<button onClick={this.handleClick}>Get Value</button>
</div>
);
}
handleClick = () => {
console.log(this.state.value);
}
}
setValue(value)
Set the selected value for the tab.
Parameter
Name | Type | Required | Description |
---|---|---|---|
value | Interger | Yes | The selected tab index. |
Return
None
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
tab.setValue(1);
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
this.setState({ value: 0 });
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Set Value</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
disableItem(tabName)
Disable a tab.
Parameter
Name | Type | Required | Description |
---|---|---|---|
tabName | String | Yes | The name of tab. |
Return
None
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
tab.disableItem('Tab2');
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
const items = [...this.state.items];
items[0].isDisabled = true;
this.setState({ items: items });
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Set disabled</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});
enableItem(tabName)
Enable a tab.
Parameter
Name | Type | Required | Description |
---|---|---|---|
tabName | String | Yes | The name of tab. |
Return
None
Sample
Javascript
var tab = new kintoneUIComponent.Tabs({
items: [
{
tabName: "Tab1",
tabContent: 'This is Tab1'
},
{
tabName: "Tab2",
tabContent: "This is Tab2",
isDisabled: true
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
]
});
kintone.events.on('app.record.index.show', function(event) {
var el = kintone.app.getHeaderSpaceElement();
el.appendChild(tab.render());
tab.enableItem('Tab2');
});
React
import { Tabs } from '@kintone/kintone-ui-component';
import React from 'react';
import ReactDOM from 'react-dom';
class Sample extends React.Component {
constructor(opts) {
super(opts);
var items = [
{
tabName: "Tab1",
tabContent: 'This is Tab1',
isDisabled: true
},
{
tabName: "Tab2",
tabContent: "This is Tab2"
},
{
tabName: "Tab3",
tabContent: "This is Tab3"
}
];
this.state = { items: items, value: 1};
}
handleClick = () => {
const items = [...this.state.items];
items[0].isDisabled = false;
this.setState({ items: items });
}
render() {
return (
<div>
<Tabs items={this.state.items} value={this.state.value} />
<button onClick={this.handleClick}>Set disabled</button>
</div>
);
}
}
kintone.events.on('app.record.index.show', function (event) {
ReactDOM.render(
<Sample />,
kintone.app.getHeaderSpaceElement()
);
});