JavaScript/jQuery Form - TabbedItem.tabs
An array of tab configuration objects.
Each item of the array passed to this property can have fields described below.
alignItemLabels
Specifies whether or not labels of items displayed within the current tab are aligned.
colCount
The count of columns in the tab layout.
For extra small screens, this property always equals 1 to make the UI component adaptive. Specify the colCountByScreen property to override this logic.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "tabbed",
tabs: [{
// ...
colCountByScreen: {
xs: 2
}
},
// ...
],
},
// ...
]
});
});Angular
<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.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "tabbed",
tabs: [{
items: [ ... ],
colCountByScreen: {
xs: 2,
sm: 3
}
}]
},
// ...
]
});
});Angular
<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 property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
icon
Specifies the icon to be displayed on the tab.
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.
items
Holds an array of form items displayed within the tab.
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
Like the items property of the Form UI component, 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 UI component 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 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.
Select one or more answers