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;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>
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.