JavaScript/jQuery Form - TabbedItem.tabs
colCount
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
Type:
| undefined
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
Type:
Array<Simple Form Item | Group Form Item | Tabbed Form Item | Empty Form Item | Button Form Item>
Default Value: undefined
tabTemplate
Type:
| undefined
Function parameters:
tabData:
tabIndex:
The index of the tab in the tabs array.
tabElement:
The tab's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: undefined
template
Type:
| undefined
Function parameters:
tabData:
tabIndex:
The index of the tab in the tabs array.
tabElement:
The tab content's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: undefined
Feedback