Angular Form - TabbedItem.tabs

An array of tab configuration objects.

Selector: dxi-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

| undefined

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.

colCountByScreen

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

Selector: dxo-col-count-by-screen

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;

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

| undefined

Default Value: undefined

This property accepts one of the following:

The icon's URL
The icon's name if the icon is from the DevExtreme icon library
The icon's CSS class if the icon is from an external icon library (see External Icon Libraries)
The icon in the Base64 format
The icon in the SVG format. Ensure that the source is reliable.