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.
See Also
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 { }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
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;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>
tabTemplate
The template to be used for rendering the tab.
A data object associated with the tab.
The index of the tab in the tabs array.
The tab's container. It is an HTML Element or a jQuery Element when you use jQuery.
A template name or container.
template
The template to be used for rendering the tab content.
A data object associated with the tab.
The index of the tab in the tabs array.
The tab content's container. It is an HTML Element or a jQuery Element when you use jQuery.
A template name or container.