tabs[]

An array of tab configuration objects.

Type: Array<Object>
Default Value: undefined

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

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 option always equals 1 to make the widget adaptive. Specify the colCountByScreen option to override this logic.

jQuery
JavaScript
$(function() {
    $("#formContainer").dxForm({
        // ...
        items: [{
            itemType: "tabbed",
            tabs: [{
                // ...
                colCountByScreen: {
                    xs: 2
                }
            },
            // ...
            ],
        },
        // ...
        ]
    });
});
Angular
HTML
TypeScript
<dx-form ... >
    <dxi-item
        itemType="tabbed">
        <dxi-tab ... >
            <dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
        </dxi-tab>
    </dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxFormModule
    ],
    // ...
})

colCountByScreen

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

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 { }

component

An alias for the template option 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 option accepts one of the following:

items

Holds an array of form items displayed within the tab.

Like the items option of the Form widget, the array passed to the items field of a tab can hold items of the following types.

  • Simple
    A standard item consisting of a label and an editor widget used to specify a value of the associated data field.

  • Group
    An item representing a container of other form items.

  • Tabbed
    An item representing a tabbed container of other form items.

  • Empty
    An empty item used to add a space between neighboring items.

render

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

tabComponent

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

tabRender

An alias for the tabTemplate option 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:

Data Object

Default Name: undefined

template

The template to be used for rendering the tab content.

Type:

template

Template Data:

Data Object

Default Name: undefined

NOTE
A binding context of an item template is the data source object that corresponds to the currently rendered item. So, you can bind template elements to the item object's fields directly. To access another binding context within an item template, use Knockout/AngularJS binding variables.
See Also

title

Specifies the tab title.

Type:

String

Default Value: undefined