Create a Tab
The Form UI component allows you to organize items in tabs. In the context of the Form, tabs are called "tabbed items". A tabbed item can contain simple items, other tabs, groups or empty items. To create a tabbed item, assign "tabbed" to the itemType property. To specify the collection of tabs, use the tabs array. To define items displayed within an individual tab, use its items array.
- <template>
- <DxForm :form-data="employee">
- <DxSimpleItem data-field="name" />
- <DxTabbedItem>
- <DxTab title="Info">
- <DxSimpleItem data-field="position" />
- <DxSimpleItem data-field="hireDate" />
- <DxSimpleItem data-field="city" />
- </DxTab>
- <DxTab title="Contacts">
- <DxSimpleItem data-field="phone" />
- <DxSimpleItem data-field="email" />
- </DxTab>
- </DxTabbedItem>
- </DxForm>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';
- const employee = {
- name: 'John Heart',
- position: 'CEO',
- hireDate: new Date(2012, 4, 13),
- city: 'Los Angeles',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- export default {
- components: {
- DxForm, DxSimpleItem, DxTabbedItem, DxTab
- },
- data() {
- return {
- employee
- };
- },
- };
- </script>
Columns within a Tab
The content of a tab can be organized in columns. The colCount property instructs the tab about how many columns it must have. Note that the entire Form layout can also be organized in columns if the colCount property is declared on the root level. In this case, use the colSpan property to define how many general columns the tab must span.
- <template>
- <DxForm
- :form-data="employee"
- :col-count="2">
- <DxSimpleItem data-field="name" />
- <DxTabbedItem :col-span="2">
- <DxTab
- title="Info"
- :col-span="2"
- :col-count="3">
- <DxSimpleItem data-field="position" />
- <DxSimpleItem data-field="hireDate" />
- <DxSimpleItem data-field="city" />
- </DxTab>
- <DxTab
- title="Contacts"
- :col-count="2">
- <DxSimpleItem data-field="phone" />
- <DxSimpleItem data-field="email" />
- </DxTab>
- </DxTabbedItem>
- </DxForm>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';
- const employee = {
- name: 'John Heart',
- position: 'CEO',
- hireDate: new Date(2012, 4, 13),
- city: 'Los Angeles',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- export default {
- components: {
- DxForm, DxSimpleItem, DxTabbedItem, DxTab
- },
- data() {
- return {
- employee
- };
- },
- };
- </script>
Custom Content within a Tab
The Form UI component allows you to specify custom templates for an individual tab and its content. For this purpose, assign callback functions to the tabTemplate and template properties, respectively. With Angular, you can declare templates using the dxTemplate component.
- <template>
- <DxForm :form-data="employee">
- <template #tab="{ data }">
- <p style="color:red">{{ data.title }}</p>
- </template>
- <template #tabContent="{ data }">
- <p>
- <i>By filling out this form, you agree
- to the terms of the <a href='#'>Data Protection Policy</a></i>
- </p>
- </template>
- <DxSimpleItem data-field="name" />
- <DxTabbedItem :col-span="2">
- <DxTab
- title="Data Protection Policy"
- tab-template="tab"
- template="tabContent" />
- <DxTab title="Info">
- <DxSimpleItem data-field="position" />
- <DxSimpleItem data-field="birthDate" />
- <DxSimpleItem data-field="city" />
- </DxTab>
- <DxTab title="Contacts">
- <DxSimpleItem data-field="phone" />
- <DxSimpleItem data-field="email" />
- </DxTab>
- </DxTabbedItem>
- </DxForm>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxForm, DxSimpleItem, DxTabbedItem, DxTab } from 'devextreme-vue/form';
- const employee = {
- name: 'John Heart',
- birthDate: new Date(1964, 3, 15),
- position: 'CEO',
- city: 'Los Angeles',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- export default {
- components: {
- DxForm, DxSimpleItem, DxTabbedItem, DxTab
- },
- data() {
- return {
- employee
- };
- },
- };
- </script>
See Also
Configure the Tab Panel
For displaying tabs, the Form uses the TabPanel UI component. Therefore, you can specify any properties of the TabPanel in the tabPanelOptions object.
- <template>
- <DxForm :form-data="employee">
- <DxSimpleItem data-field="firstName" />
- <DxSimpleItem data-field="lastName" />
- <DxTabbedItem>
- <DxTabPanelOptions
- :height="250"
- :on-title-click="tabPanelTitleClick" />
- <DxTab title="Info">
- <DxSimpleItem data-field="hireDate" />
- <DxSimpleItem data-field="city" />
- </DxTab>
- <DxTab title="Contacts">
- <DxSimpleItem data-field="phone" />
- <DxSimpleItem data-field="email" />
- </DxTab>
- </DxTabbedItem>
- </DxForm>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxForm, DxSimpleItem, DxTabbedItem, DxTab, DxTabPanelOptions } from 'devextreme-vue/form';
- const employee = {
- firstName: 'John',
- lastName: 'Heart',
- hireDate: new Date(2012, 4, 13),
- city: 'Los Angeles',
- phone: '+1(213) 555-9392',
- email: 'jheart@dx-email.com'
- };
- export default {
- components: {
- DxForm, DxSimpleItem, DxTabbedItem, DxTab, DxTabPanelOptions
- },
- data() {
- return {
- employee
- };
- },
- methods: {
- tabPanelTitleClick(e) {
- // ...
- }
- }
- };
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.