Search results

TabModel API in Vue Tabs API component

Interface for a class Tab




The event will be fired after adding the item to the Tab.



The event will be fired before adding the item to the Tab.



The event will be fired once the component rendering is completed.



The event will be fired when the component gets destroyed.



The event will be fired after dropping the Tab item



The event will be fired while dragging the Tab item



The event will be fired before dragging the item from Tab



The event will be fired after removing the item from the Tab.



The event will be fired before removing the item from the Tab.



The event will be fired after the item gets selected.



The event will be fired before the item gets selected.



Sets true to allow drag and drop the Tab items



Specifies the animation configuration settings while showing the content of the Tab.



Specifies whether the templates need to be cleared or not while changing the Tab items dynamically.



Sets the CSS classes to root element of the Tab that helps to customize component styles.



Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted for the draggable element movement. By default, the draggable element movement occurs in the toolbar.



Specifies whether to enable the rendering of untrusted HTML values in the Tab component. When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.



Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

  1. selectedItem



Enable or disable rendering component in right to left direction.



Specifies the orientation of Tab header. The possible values for this property as follows

  • Top: Places the Tab header on the top.
  • Bottom: Places the Tab header at the bottom.
  • Left: Places the Tab header on the left.
  • Right: Places the Tab header at the right.


string | number

Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent. To use height property, heightAdjustMode must be set to ‘None’.



Specifies the height style for Tab content. The possible values for this property as follows

  • None: Based on the given height property, the content panel height is set.
  • Auto: Tallest panel height of a given Tab content is set to all the other panels.
  • Content: Based on the corresponding content height, the content panel height is set.
  • Fill: Based on the parent height, the content panel height is set.



An array of object that is used to configure the Tab component.

  <div id="app">
    <ejs-tab id="element">
        <e-tabitem :header="twitter" :content="'twitterContent'">
            <template v-slot:twitterContent>
              Twitter is an online social networking service that enables users
              to send and read short 140-character ' + 'messages called tweets.
              Registered users can read and post tweets, but those who are
              unregistered can only read them. ' + 'Users access Twitter through
              the website interface, SMS or mobile device app Twitter Inc. is
              based in San Francisco and ' + 'has more than 25 offices around
              the world. Twitter was created in March 2006 by Jack Dorsey, Evan
              Williams, Biz Stone, ' + 'and Noah Glass and launched in July
              2006. The service rapidly gained worldwide popularity, with more
              than 100 million ' + 'users posting 340 million tweets a day in
              2012. The service also handled 1.6 billion search queries per day.
        <e-tabitem :header="facebook" :content="'facebookContent'">
            <template v-slot:facebookContent>
              Facebook is an online social networking service headquartered in
              Menlo Park, California. Its website ' + 'was launched on February
              4, 2004, by Mark Zuckerberg with his Harvard College roommates and
              fellow students Eduardo ' + 'Saverin, Andrew McCollum, Dustin
              Moskovitz and Chris Hughes. The founders had initially limited the
              website\' ' + 'membership to Harvard students, but later expanded
              it to colleges in the Boston area, the Ivy League, and Stanford '
              + 'University. It gradually added support for students at various
              other universities and later to high-school students.
  import Vue from "vue";
  import { TabPlugin } from "@syncfusion/ej2-vue-navigations";

  export default {
    name: "app",
    data: function () {
      return {
        twitter: { text: 'Twitter' },
        facebook: { text: 'Facebook' }, 



Specifies the modes for Tab content. The possible modes are:

  • Demand - The content of the selected tab alone is loaded initially. The content of the tabs which were loaded once will be maintained in the DOM.
  • Dynamic - The content of all the tabs are rendered on the initial load and maintained in the DOM.
  • Init - The content of all the tabs are rendered on the initial load and maintained in the DOM.



Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.



Specifies the Tab display mode when Tab content exceeds the viewing area. The possible modes are:

  • Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
  • Popup: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup. If the popup content overflows the height of the page, the rest of the elements can be viewed by scrolling the popup.



Determines whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is Popup. True, if active tab item should be visible in header area instead of pop-up. The default value is true.



Specifies the scrolling distance in scroller.



Specifies the index for activating the current Tab item.

  <ejs-tab id="tab" selectedItem="1">
      <e-tabitem :header="headerText0" :content="'content0'">
        <template v-slot:content0>
          <div>India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.</div>
      <e-tabitem :header="headerText1" :content="'content1'">
        <template v-slot:content1>
          <div>Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.</div>
      <e-tabitem :header="headerText2" :content="'content2'">
        <template v-slot:content2>
          <div>The United States of America (USA or U.S.A.), commonly called the United States (US or U.S.) and America, is a federal republic consisting of fifty states and a federal district. The 48 contiguous states and the federal district of Washington, D.C. are in central North America between Canada and Mexico. The state of Alaska is west of Canada and east of Russia across the Bering Strait, and the state of Hawaii is in the mid-North Pacific. The country also has five populated and nine unpopulated territories in the Pacific and the Caribbean.</div>
      <e-tabitem :header="headerText3" :content="'content3'">
        <template v-slot:content3>
          <div>France, officially the French Republic is a sovereign state comprising territory in western Europe and several overseas regions and territories. The European part of France, called Metropolitan France, extends from the Mediterranean Sea to the English Channel and the North Sea, and from the Rhine to the Atlantic Ocean; France covers 640,679 square kilo metres and as of August 2015 has a population of 67 million, counting all the overseas departments and territories.</div>

import {
} from "@syncfusion/ej2-vue-navigations";

export default {
  name: "TabComponent",
  components: {
    "ejs-tab": TabComponent,
    "e-tabitem": TabItemDirective,
    "e-tabitems": TabItemsDirective,
  data: function () {
    return {
      headerText0: { text: "India" },
      headerText1: { text: "Australia" },
      headerText2: { text: "USA" },
      headerText3: { text: "France" },



Specifies whether to show the close button for header items to remove the item from the Tab.


string | number

Specifies the width of the Tab component. Default, Tab width sets based on the width of its parent.