Ribbon Contextual Tabs
13 May 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 within each e-ribbon-contextual-tag directive 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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public headerButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-header", content: "Text Header" };
public wrapButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-wrap", content: "Text Wrap" };
public annotationButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-annotation", content: "Text Annotation" };
public altButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-text-alternative", content: "Alt Text" };
public forwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
public backwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
public selectionButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon id="ribbon">
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab [visible]="true">
<e-ribbon-tabs>
<e-ribbon-tab header="Shape Format">
<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]="headerButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="wrapButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="annotationButton"> </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" [buttonSettings]="altButton"> </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]="forwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="backwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="selectionButton"> </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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<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>
</ejs-ribbon>Selected tabs
By using the isSelected property, you can control the selected state of each contextual tab and indicates which tab is currently active.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public styleButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-style", content: "Style" };
public textButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-font-name", content: "Text Box" };
public paintButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-paint-bucket", content: "Paint" };
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<ejs-ribbon id="ribbon">
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab [isSelected]="true" [visible]="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]="styleButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="textButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="paintButton"> </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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<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>
</ejs-ribbon>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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { RibbonModule, RibbonContextualTabService } from '@syncfusion/ej2-angular-ribbon'
import { Component, ViewChild } from "@angular/core";
import { RibbonButtonSettingsModel, DisplayMode } from '@syncfusion/ej2-angular-ribbon';
@Component({
imports: [ RibbonModule],
providers: [ RibbonContextualTabService ],
standalone: true,
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('ribbon') ribbon!: RibbonComponent;
@ViewChild('showContextual') showElement!: HTMLElement;
@ViewChild('hideContextual') hideElement!: HTMLElement;
public copyButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-copy", content: "Copy" };
public cutButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Cut" };
public formatButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-cut", content: "Format Painter" };
public forwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-bring-forward", content: "Bring Forward" };
public backwardButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-send-backward", content: "Send Backward" };
public selectionButton: RibbonButtonSettingsModel = { iconCss: "e-icons e-show-hide-panel", content: "Selection Pane" };
toggleRibbonTabs = (value: string) => {
(this.ribbon as any)[value]('ArrangeView', true);
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));<button (click)="toggleRibbonTabs('showTab')" class="e-btn"> Show tab </button>
<button (click)="toggleRibbonTabs('hideTab')" class="e-btn"> Hide tab </button>
<ejs-ribbon #ribbon id="ribbon" style="margin-top: 30px;">
<e-ribbon-contextual-tabs>
<e-ribbon-contextual-tab>
<e-ribbon-tabs>
<e-ribbon-tab id="ArrangeView" header="Arrange & View">
<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]="forwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="backwardButton"> </e-ribbon-item>
<e-ribbon-item type="Button" [buttonSettings]="selectionButton"> </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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<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>
</ejs-ribbon>