Vue Form - TabbedItem.tabs
An array of tab configuration objects.
Each item of the array passed to this option 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.
For extra small screens, this option always equals 1 to make the widget adaptive. Specify the colCountByScreen option to override this logic.
jQuery
$(function() {
$("#formContainer").dxForm({
// ...
items: [{
itemType: "tabbed",
tabs: [{
// ...
colCountByScreen: {
xs: 2
}
},
// ...
],
},
// ...
]
});
});Angular
<dx-form ... >
<dxi-item
itemType="tabbed">
<dxi-tab ... >
<dxo-col-count-by-screen [xs]="2"></dxo-col-count-by-screen>
</dxi-tab>
</dxi-item>
</dx-form>
import { DxFormModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxFormModule
],
// ...
})colCountByScreen
Specifies dependency between the screen factor and the count of columns in the tab layout.
disabled
A Boolean value specifying whether or not the tab can respond to user interaction.
icon
Specifies the icon to be displayed on the tab.
This option accepts the name of an icon from the built-in icon library, a path to the icon image, or a CSS class of an icon stored in an external icon library. For information on using external icon libraries, refer to the Icon Library article.
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>
Like the items option of the Form widget, the array passed to the items field of a tab can hold items of the following types.
Simple
A standard item consisting of a label and an editor widget used to specify a value of the associated data field.Group
An item representing a container of other form items.Tabbed
An item representing a tabbed container of other form items.Empty
An empty item used to add a space between neighboring items.
Select one or more answers