tabs[]
colCount
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
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
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.