React Form - TabbedItem.tabs

An array of tab configuration objects.

Selector: Tab
Type:

Array<Object>

Default Value: undefined

Each item of the array passed to this property can have fields described below.

View Demo

alignItemLabels

Specifies whether or not labels of items displayed within the current tab are aligned.

Type:

Boolean

Default Value: true

badge

Specifies a badge text for the tab.

Type:

String

Default Value: undefined

colCount

The count of columns in the tab layout.

Type:

Number

Default Value: 1

NOTE
For extra small screens, this property always equals 1 to make the UI component adaptive. Specify the colCountByScreen property to override this logic.
See Also

colCountByScreen

Specifies the relation between the screen size qualifier and the number of columns in the tabbed layout.

Selector: ColCountByScreen
Type:

Object

Default Value: undefined

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "tabbed",
            tabs: [{
                items: [ ... ],
                colCountByScreen: {
                    xs: 2, 
                    sm: 3  
                }
            }]
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<dx-form ... >
    <dxi-item itemType="tabbed">
        <dxi-tab title="Phone">
            <dxo-col-count-by-screen 
                [xs]="2"  
                [sm]="3"> 
            </dxo-col-count-by-screen>
            <dxi-item ... ></dxi-item>
        </dxi-tab>
    </dxi-item>
</dx-form>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxFormModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxFormModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxForm ... >
        <DxTabbedItem ... >
            <DxTab title="Phone">
                <DxColCountByScreen :xs="2" :sm="3"/>
                <DxSimpleItem ... />
            </DxTab>
        </DxTabbedItem>
    </DxForm>
</template>
<script>
import DxForm, {
    DxTabbedItem,
    DxTab,
    DxColCountByScreen,
    DxSimpleItem
} from 'devextreme-vue/form';

export default {
    components: {
        DxForm,
        DxTabbedItem,
        DxTab,
        DxColCountByScreen,
        DxSimpleItem
    }
}
</script>
React
App.js
import Form, {
    TabbedItem,
    Tab,
    SimpleItem,
    ColCountByScreen
} from 'devextreme-react/form';

const App = () => {
    return (
        <Form ... >
            <TabbedItem ... >
                <Tab title="Phone">
                    <ColCountByScreen xs={2} sm={3} />
                    <SimpleItem ... />
                </Tab>
            </TabbedItem>
        </Form>
    );
};

export default App;

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the tab responds to user interaction.

Type:

Boolean

Default Value: false

icon

Specifies the icon to be displayed on the tab.

Type:

String

Default Value: undefined

This property accepts one of the following:

items

Holds an array of form items displayed within the tab.

Selector: Item
Type:

Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>

Default Value: undefined

Like the items property of the Form UI component, the array passed to the items field of a tab can hold items of any type.

View Demo

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

tabComponent

An alias for the tabTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

tabRender

An alias for the tabTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

tabTemplate

The template to be used for rendering the tab.

Type:

template

Template Data:

Object

A data object associated with the tab.

Default Name: undefined

template

The template to be used for rendering the tab content.

Type:

template

Template Data:

Object

A data object associated with the tab.

Default Name: undefined

See Also

title

Specifies the tab title.

Type:

String

Default Value: undefined

View Demo