|
[ribbon.component.html]
<button (click)="addRibbonTab()">Add ribbon tab</button> //Button to add tabs into ribbon control in click event.
<ej-ribbon id="Default" width="500px" applicationTab.type="menu" applicationTab.menuItemID="ribbonmenu">
<e-tabs>
<div *ngFor="let item of Tabs">
<e-tab [id]="item.Id" [text]="item.Name" [groups]="item.Groups" *ngIf="item.IsVisible"></e-tab>
</div>
</e-tabs>
</ej-ribbon>
[ribbon.component.ts]
addRibbonTab(e) {
$('#Default').data('ejRibbon').addTab("Tab3", this.groups3, 3); //Add ribbon tabs using “addTab” method of ribbon control.
}
Tabs = [{
Id: "home",
Name: "HOME",
Groups: [{
text: "Group1",
alignType: "rows",
content: [{
groups: [{
id: "grp1",
text: "Group1 button",
toolTip: "Group1 button"
}],
defaults: {
type: "button",
}
}]
}],
IsVisible: true
},
{
Id: "insert",
Name: "INSERT",
Groups: [{
text: "Group2",
alignType: "rows",
content: [{
groups: [{
id: "grp2",
text: "Group2 button",
toolTip: "Group2 button"
}],
defaults: {
type: "button",
}
}]
}],
IsVisible: true
}]
groups3 = [{
text: "Group3",
alignType: "rows",
content: [{
groups: [{
id: "grp3",
text: "Group3 button",
toolTip: "Group3 button"
}],
defaults: {
type: "button",
}
}]
}]
|
