Free Trial Buy

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

disabled

A Boolean value specifying whether or not the tab can respond 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.

Type:

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

Default Value: undefined

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.

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

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