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.
Type:
Default Value: true
colCount
The count of columns in the tab layout.
Type:
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.
See Also
colCountByScreen
Specifies the relation between the screen size qualifier and the number of columns in the tabbed layout.
Type:
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;icon
Specifies the icon to be displayed on the tab.
Type:
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.
items
Holds an array of form items displayed within the tab.
Type:
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
Default Value: undefined
Select one or more answers