Ribbon contextual tabs

11 Jun 202424 minutes to read

The Ribbon Contextual tabs are similar to the Ribbon tabs that are displayed on demand based on their needs, such as an image or a table tabs. It supports adding all built-in and custom ribbon items to perform specific actions.

Visible tabs

You can utilize the visible property to control the visibility of each contextual tab.

Adding contextual tabs

You can utilize the e-ribbon-contextual-tabs tag directive to add contextual tabs in the Ribbon where you can add multiple tabs based on your needs.

<template>
  <ejs-ribbon>
    <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
        <e-ribbon-groups>
          <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste" id="clipboardGroup">
            <e-ribbon-collections>
              <e-ribbon-collection>
                <e-ribbon-items>
                  <e-ribbon-item type="Button" :buttonSettings="cutButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="copyButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="formatButton">
                  </e-ribbon-item>
                </e-ribbon-items>
              </e-ribbon-collection>
            </e-ribbon-collections>
          </e-ribbon-group>
        </e-ribbon-groups>
      </e-ribbon-tab>
    </e-ribbon-tabs>
    <e-ribbon-contextual-tabs>
      <e-ribbon-contextual-tab visible=true>
        <e-ribbon-tabs>
          <e-ribbon-tab header="Shape Format" id="ShapeFormat">
            <e-ribbon-groups>
              <e-ribbon-group header="Text decoration" showLauncherIcon=true>
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" :buttonSettings="text1">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="text2">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="text3">
                      </e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
              <e-ribbon-group header="Accessibility">
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" :allowedSizes="largeSize" :buttonSettings="accessibility">
                      </e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
              <e-ribbon-group header="Arrange" showLauncherIcon=true>
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" :buttonSettings="forward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="backward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="selection">
                      </e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </e-ribbon-contextual-tab>
    </e-ribbon-contextual-tabs>
  </ejs-ribbon>
</template>

<script setup>
import { provide } from "vue";

import { RibbonItemSize, RibbonContextualTab, RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab, RibbonContextualTabDirective as ERibbonContextualTab, RibbonContextualTabsDirective as ERibbonContextualTabs } from "@syncfusion/ej2-vue-ribbon";

provide('ribbon', [RibbonContextualTab]);

const largeSize = RibbonItemSize.Large
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const text1 = { iconCss: "e-icons e-text-header", content: "Text Header" };
const text2 = { iconCss: "e-icons e-text-wrap", content: "Text Wrap" };
const text3 = { iconCss: "e-icons e-text-annotation", content: "Text Annotation" };
const accessibility = { iconCss: "e-icons e-text-alternative", content: "Alt Text" };
const forward = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
const backward = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
const selection = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>
<template>
  <ejs-ribbon>
    <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
        <e-ribbon-groups>
          <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste" id="clipboardGroup">
            <e-ribbon-collections>
              <e-ribbon-collection>
                <e-ribbon-items>
                  <e-ribbon-item type="Button" :buttonSettings="cutButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="copyButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="formatButton">
                  </e-ribbon-item>
                </e-ribbon-items>
              </e-ribbon-collection>
            </e-ribbon-collections>
          </e-ribbon-group>
        </e-ribbon-groups>
      </e-ribbon-tab>
    </e-ribbon-tabs>
    <e-ribbon-contextual-tabs>
      <e-ribbon-contextual-tab visible=true>
        <e-ribbon-tabs>
          <e-ribbon-tab header="Shape Format" id="ShapeFormat">
            <e-ribbon-groups>
              <e-ribbon-group header="Text decoration" showLauncherIcon=true>
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :buttonSettings="text1">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="text2">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="text3">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
              </e-ribbon-group>
              <e-ribbon-group header="Accessibility">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :allowedSizes="largeSize" :buttonSettings="accessibility">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
              </e-ribbon-group>
              <e-ribbon-group header="Arrange" showLauncherIcon=true>
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :buttonSettings="forward">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="backward">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="selection">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </e-ribbon-contextual-tab>
    </e-ribbon-contextual-tabs>
  </ejs-ribbon>
</template>

<script>
  

  import { RibbonItemSize, RibbonContextualTab, RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-vue-ribbon";


  export default {
name: "App",
components: {
    "ejs-ribbon": RibbonComponent,
    "e-ribbon-tabs": RibbonTabsDirective,
    "e-ribbon-tab": RibbonTabDirective,
    "e-ribbon-groups": RibbonGroupsDirective,
    "e-ribbon-group": RibbonGroupDirective,
    "e-ribbon-collections": RibbonCollectionsDirective,
    "e-ribbon-collection": RibbonCollectionDirective,
    "e-ribbon-items": RibbonItemsDirective,
    "e-ribbon-item": RibbonItemDirective,
    "e-ribbon-contextual-tabs":RibbonContextualTabsDirective,
    "e-ribbon-contextual-tab":RibbonContextualTabDirective
},

    provide: {
      ribbon: [RibbonContextualTab]
    },
    data: function () {
      return {
        largeSize: RibbonItemSize.Large,
        cutButton:  { iconCss: "e-icons e-cut", content: "Cut" },
        copyButton:  { iconCss: "e-icons e-copy", content: "Copy" },
        formatButton:  { iconCss: "e-icons e-format-painter", content: "Format Painter" },
        text1:  { iconCss: "e-icons e-text-header", content: "Text Header" },
        text2:  { iconCss: "e-icons e-text-wrap", content: "Text Wrap" },
        text3:  { iconCss: "e-icons e-text-annotation", content: "Text Annotation" },
        accessibility:  { iconCss: "e-icons e-text-alternative", content: "Alt Text" },
        forward:  { iconCss: "e-icons e-bring-forward", content: "Bring Forward" },
        backward:  { iconCss: "e-icons e-send-backward", content: "Send Backward" },
        selection:  { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }
      };
    }
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";  
  @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>

Selected tabs

By using the isSelected property you can control the selected state of each contextual tab and indicates which tab is currently active.

<template>
  <ejs-ribbon>
      <e-ribbon-tabs>
          <e-ribbon-tab header="Home">
              <e-ribbon-groups>
                  <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste"
                      id="clipboardGroup">
                      <e-ribbon-collections>
                          <e-ribbon-collection>
                              <e-ribbon-items>
                                  <e-ribbon-item type="Button" :buttonSettings="cutButton">
                                  </e-ribbon-item>
                                  <e-ribbon-item type="Button" :buttonSettings="copyButton">
                                  </e-ribbon-item>
                                  <e-ribbon-item type="Button" :buttonSettings="formatButton">
                                  </e-ribbon-item>
                              </e-ribbon-items>
                          </e-ribbon-collection>
                      </e-ribbon-collections>
                  </e-ribbon-group>
              </e-ribbon-groups>
          </e-ribbon-tab>
      </e-ribbon-tabs>
      <e-ribbon-contextual-tabs>
          <e-ribbon-contextual-tab visible=true isSelected=true>
              <e-ribbon-tabs>
                  <e-ribbon-tab header="Styles">
                      <e-ribbon-groups>
                          <e-ribbon-group header="Style" showLauncherIcon=true>
                              <e-ribbon-collections>
                                  <e-ribbon-collection>
                                      <e-ribbon-items>
                                          <e-ribbon-item type="Button" :buttonSettings="style">
                                          </e-ribbon-item>
                                          <e-ribbon-item type="Button" :buttonSettings="textbox">
                                          </e-ribbon-item>
                                          <e-ribbon-item type="Button" :buttonSettings="paint">
                                          </e-ribbon-item>
                                      </e-ribbon-items>
                                  </e-ribbon-collection>
                              </e-ribbon-collections>
                          </e-ribbon-group>
                      </e-ribbon-groups>
                  </e-ribbon-tab>
              </e-ribbon-tabs>
          </e-ribbon-contextual-tab>
      </e-ribbon-contextual-tabs>
  </ejs-ribbon>
</template>

<script setup>
import { provide } from "vue";

import { RibbonContextualTab, RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab, RibbonContextualTabDirective as ERibbonContextualTab, RibbonContextualTabsDirective as ERibbonContextualTabs } from "@syncfusion/ej2-vue-ribbon";



provide('ribbon', [RibbonContextualTab]);


const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const style = { iconCss: "e-icons e-style", content: "Style" };
const textbox = { iconCss: "e-icons e-font-name", content: "Text Box" };
const paint = { iconCss: "e-icons e-paint-bucket", content: "Paint" };

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>
<template>
  <ejs-ribbon>
    <e-ribbon-tabs>
      <e-ribbon-tab header="Home">
        <e-ribbon-groups>
          <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste" id="clipboardGroup">
            <e-ribbon-collections>
              <e-ribbon-collection>
                <e-ribbon-items>
                  <e-ribbon-item type="Button" :buttonSettings="cutButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="copyButton">
                  </e-ribbon-item>
                  <e-ribbon-item type="Button" :buttonSettings="formatButton">
                  </e-ribbon-item>
                </e-ribbon-items>
              </e-ribbon-collection>
            </e-ribbon-collections>
          </e-ribbon-group>
        </e-ribbon-groups>
      </e-ribbon-tab>
    </e-ribbon-tabs>
    <e-ribbon-contextual-tabs>
      <e-ribbon-contextual-tab visible=true isSelected=true>
        <e-ribbon-tabs>
          <e-ribbon-tab header="Styles">
            <e-ribbon-groups>
              <e-ribbon-group header="Style" showLauncherIcon=true>
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :buttonSettings="style">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="textbox">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="paint">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
              </e-ribbon-group>
            </e-ribbon-groups>
          </e-ribbon-tab>
        </e-ribbon-tabs>
      </e-ribbon-contextual-tab>
    </e-ribbon-contextual-tabs>
  </ejs-ribbon>
</template>

<script>
  
  import { RibbonContextualTab, RibbonItemSize, RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-vue-ribbon";


  export default {
name: "App",
components: {
    "ejs-ribbon": RibbonComponent,
    "e-ribbon-tabs": RibbonTabsDirective,
    "e-ribbon-tab": RibbonTabDirective,
    "e-ribbon-groups": RibbonGroupsDirective,
    "e-ribbon-group": RibbonGroupDirective,
    "e-ribbon-collections": RibbonCollectionsDirective,
    "e-ribbon-collection": RibbonCollectionDirective,
    "e-ribbon-items": RibbonItemsDirective,
    "e-ribbon-item": RibbonItemDirective,
    "e-ribbon-contextual-tabs":RibbonContextualTabsDirective,
    "e-ribbon-contextual-tab":RibbonContextualTabDirective
},

    provide: {
      ribbon: [RibbonContextualTab]
    },
    data: function () {
      return {
        largeSize: RibbonItemSize.Large,
        cutButton:  { iconCss: "e-icons e-cut", content: "Cut" },
        copyButton:  { iconCss: "e-icons e-copy", content: "Copy" },
        formatButton:  { iconCss: "e-icons e-format-painter", content: "Format Painter" },
        style:  { iconCss: "e-icons e-style", content: "Style" },
        textbox:  { iconCss: "e-icons e-font-name", content: "Text Box" },
        paint:  { iconCss: "e-icons e-paint-bucket", content: "Paint" }
      };
    }
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";  
  @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>

Methods

Show tab

You can use the showTab method to make the specific Contextual tab visible in the Ribbon.

Hide tab

You can use the hideTab method to hide specific Contextual tab in the Ribbon.

<template>
  <div>
    <button class="e-btn" id="show-contextual" @click="showContextualTab"> Show tab </button>
    <button class="e-btn" id="hide-contextual" @click="hideContextualTab"> Hide tab </button>
    <ejs-ribbon ref="ribbonContextualTab">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste" id="clipboardGroup">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :buttonSettings="cutButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="copyButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="formatButton">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
      <e-ribbon-contextual-tabs>
        <e-ribbon-contextual-tab>
          <e-ribbon-tabs>
            <e-ribbon-tab header="Arrange & View" id="ArrangeView">
              <e-ribbon-groups>
                <e-ribbon-group header="Arrange" showLauncherIcon=true>
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" :buttonSettings="forward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="backward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="selection ">
                      </e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
                </e-ribbon-group>
              </e-ribbon-groups>
            </e-ribbon-tab>
          </e-ribbon-tabs>
        </e-ribbon-contextual-tab>
      </e-ribbon-contextual-tabs>
    </ejs-ribbon>
  </div>
</template>

<script setup>
import { provide } from "vue";
 import {ref} from 'vue'; 
  import { RibbonContextualTab, RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab, RibbonContextualTabDirective as ERibbonContextualTab, RibbonContextualTabsDirective as ERibbonContextualTabs} from "@syncfusion/ej2-vue-ribbon";
  
    provide('ribbon',  [RibbonContextualTab]);

      const ribbonContextualTab=ref(null);
      const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
      const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
      const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
      const forward = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
      const backward = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
      const selection = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };


     const showContextualTab = () => {
        ribbonContextualTab.value.showTab('ArrangeView', true);
      }
     const hideContextualTab = () => {
        ribbonContextualTab.value.hideTab('ArrangeView', true);
      };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";  
  @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>
<template>
  <div>
    <button class="e-btn" id="show-contextual" @click="showContextualTab"> Show tab </button>
    <button class="e-btn" id="hide-contextual" @click="hideContextualTab"> Hide tab </button>
    <ejs-ribbon ref="ribbonContextualTab">
      <e-ribbon-tabs>
        <e-ribbon-tab header="Home">
          <e-ribbon-groups>
            <e-ribbon-group header="Clipboard" showLauncherIcon=true groupIconCss="e-icons e-paste" id="clipboardGroup">
              <e-ribbon-collections>
                <e-ribbon-collection>
                  <e-ribbon-items>
                    <e-ribbon-item type="Button" :buttonSettings="cutButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="copyButton">
                    </e-ribbon-item>
                    <e-ribbon-item type="Button" :buttonSettings="formatButton">
                    </e-ribbon-item>
                  </e-ribbon-items>
                </e-ribbon-collection>
              </e-ribbon-collections>
            </e-ribbon-group>
          </e-ribbon-groups>
        </e-ribbon-tab>
      </e-ribbon-tabs>
      <e-ribbon-contextual-tabs>
        <e-ribbon-contextual-tab>
          <e-ribbon-tabs>
            <e-ribbon-tab header="Arrange & View" id="ArrangeView">
              <e-ribbon-groups>
                <e-ribbon-group header="Arrange" showLauncherIcon=true>
                <e-ribbon-collections>
                  <e-ribbon-collection>
                    <e-ribbon-items>
                      <e-ribbon-item type="Button" :buttonSettings="forward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="backward">
                      </e-ribbon-item>
                      <e-ribbon-item type="Button" :buttonSettings="selection ">
                      </e-ribbon-item>
                    </e-ribbon-items>
                  </e-ribbon-collection>
                </e-ribbon-collections>
                </e-ribbon-group>
              </e-ribbon-groups>
            </e-ribbon-tab>
          </e-ribbon-tabs>
        </e-ribbon-contextual-tab>
      </e-ribbon-contextual-tabs>
    </ejs-ribbon>
  </div>
</template>

<script>
  
  import { RibbonContextualTab,RibbonItemSize, RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective, RibbonContextualTabsDirective, RibbonContextualTabDirective } from "@syncfusion/ej2-vue-ribbon";



  export default {
name: "App",
components: {
    "ejs-ribbon": RibbonComponent,
    "e-ribbon-tabs": RibbonTabsDirective,
    "e-ribbon-tab": RibbonTabDirective,
    "e-ribbon-groups": RibbonGroupsDirective,
    "e-ribbon-group": RibbonGroupDirective,
    "e-ribbon-collections": RibbonCollectionsDirective,
    "e-ribbon-collection": RibbonCollectionDirective,
    "e-ribbon-items": RibbonItemsDirective,
    "e-ribbon-item": RibbonItemDirective,
    "e-ribbon-contextual-tabs":RibbonContextualTabsDirective,
    "e-ribbon-contextual-tab":RibbonContextualTabDirective
},

    provide: {
      ribbon: [RibbonContextualTab]
    },
    data: function () {
      return {
        largeSize: RibbonItemSize.Large,
        cutButton:  { iconCss: "e-icons e-cut", content: "Cut" },
        copyButton:  { iconCss: "e-icons e-copy", content: "Copy" },
        formatButton:  { iconCss: "e-icons e-format-painter", content: "Format Painter" },
        forward:  { iconCss: "e-icons e-bring-forward", content: "Bring Forward" },
        backward:  { iconCss: "e-icons e-send-backward", content: "Send Backward" },
        selection:  { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" }
      };
    },
    methods: {
      showContextualTab() {
        this.$refs.ribbonContextualTab.showTab('ArrangeView', true);
      },
      hideContextualTab() {
        this.$refs.ribbonContextualTab.hideTab('ArrangeView', true);
      }
    }
  };
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";  
  @import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-ribbon/styles/material.css";
</style>