Skip to main content
Version: 1.16.0

Tabs

Overview

The Tabs component allows the user to display multiple tabs that can switch displaying contents.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
idstring""Component id name
valuestring""Selected value
  • If the value is matched in the items, the tab will be displayed even if it’s disabled
  • The first visible tab will be displayed in the following cases:
    • If the value is not matched in the items
    • If the value is matched in the items, but the tab is not visible
  • Will result an error if the value is not string type
  • borderVisiblebooleantrueShow/Hide the border surrounding the content
    visiblebooleantrueShow/Hide the component
    itemsArray<Item>[]List of tabs to displayWill result an error if the value of items is not an array

    Item

    NameTypeDefaultDescriptionRemark
    contentstring/HTMLElement""Tab content
    labelstring""Tab name
    valuestring""Key of each tab
    *Required and Unique
    Will result an error if the value is duplicated in items or not specified
    disabledbooleanfalseEnable/Disable the tab
    visiblebooleantrueShow/Hide the tab

    Event

    Here is a list of events that can be specified:

    NameTypeDescriptionRemark
    changefunctionEvent handler of when selected tab is changedIt will pass the event object as the argument

    You can receive the following values in event.detail
  • event.detail.oldValue : "value" before the change
  • event.detail.value : "value" after the change
  • Constructor

    Tabs(options)
    Here is a list of available constructors:

    Parameter

    NameTypeDefaultDescriptionRemark
    optionsobject{}Object that includes component properties

    Custom CSS

    tip

    Please check Custom CSS feature guide at first.

    Here is a list of properties that can be used for modifying component style:

    Property

    Name
    --kuc-tabs-tab-background-color
    --kuc-tabs-tab-background-color-selected
    --kuc-tabs-tab-color
    --kuc-tabs-tab-color-selected
    --kuc-tabs-tab-font-size
    --kuc-tabs-tab-height
    --kuc-tabs-tab-width

    Sample Code

    tip

    Please check the package installation method first.

    Here is a sample code when all parameters are specified:

    const Kuc = Kucs['1.x.x'];

    const space = kintone.app.record.getSpaceElement('space');

    // Create each Tab content
    const textArea = new Kuc.TextArea({
    label: 'TextArea',
    value: 'This is sample.'
    });

    const timePicker = new Kuc.TimePicker({
    label: 'Time',
    value: '11:30'
    });

    const text = 'This is sample.';

    const tabs = new Kuc.Tabs({
    items: [
    {
    label: 'A',
    content: textArea,
    value: 'a',
    disabled: false
    },
    {
    label: 'B',
    content: timePicker,
    value: 'b',
    disabled: false
    },
    {
    label: 'C',
    content: text,
    value: 'c',
    disabled: false
    }
    ],
    value: 'a',
    className: 'options-class',
    id: 'options-id',
    visible: true,
    borderVisible: true
    });
    space.appendChild(tabs);

    tabs.addEventListener('change', event => {
    console.log(event);
    });