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