Contextual Tabs
14 Aug 2018 / 7 minutes to read
Contextual Tabs
are collection of Tabs that extended styling and can be shown based on some criteria. Contextual Tabs can be added like tabs
including groups and content section. You can set backgroundColor
and borderColor
to highlight them as Tab set.
Contextual tabs can be added or set dynamically in ribbon control using addContextualTabs
with it’s object and index position.
<body ng-controller="RibbonCtrl">
<ul id="ribbonmenu">
<li>
<a>FILE</a>
<ul>
<li><a>New</a></li>
<li><a>Open</a></li>
<li><a>Save</a></li>
<li><a>Save As</a></li>
<li><a>Print</a></li>
</ul>
</li>
</ul>
<table id="design" class="e-designtablestyle">
<tr>
<td style="width:87px">
<input type="checkbox" id="check1" /><label for="check1">Header Row</label>
</td>
<td>
<input type="checkbox" id="Check2" checked="checked" /><label for="Check2">First Column</label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="check4" checked="checked" /><label for="check4">Total Row</label>
</td>
<td>
<input type="checkbox" id="Check5" /><label for="Check5">Last Column</label>
</td>
</tr>
</table>
<div id="Ribbon" ej-ribbon e-width="50%" e-applicationtab-type="menu" e-applicationtab-menuitemid="ribbonmenu">
<e-tabs>
<div e-tab e-id="home" e-text="HOME">
<div e-groups>
</div>
</div>
</e-tabs>
<div e-contextualtabs>
<div e-contextualtab e-backgroundcolor="#FCFBEB" e-bordercolor="#F2CC1C">
<div e-tabs>
<div e-tab e-id="Design" e-text="DESIGN">
<div e-groups>
</div>
</div>
</div>
</div>
<div e-contextualtab backgroundcolor="blue" bordercolor="lightblue">
<div e-tabs>
<div e-tab e-id="tabset1" e-text="Tabset1">
<div e-groups>
<div e-group e-type="custom" e-contentid="design"></div>
</div>
</div>
<div e-tab e-id="tabset2" e-text="Tabset2">
<div e-groups>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
angular.module('RibbonApp', ['ejangular'])
.controller('RibbonCtrl', function ($scope) {
});
</script>
</body>
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page