acha-framework/src/frontend/core/scripts/directives/ribbon/template.html

is a modular framework on both client (angular.js) and server (node.js) side, it provides security, orm, ioc, obfuscation and ...

<div ng-show="visible" class="af-ribbon af-component {{::cssClass}}">
    <div class="tabs-container">
        <div class="tabs-header">
            <ul>
                <li ng-repeat="step in steps"
                    class="{{step === vm.selectedStep ? 'active' : ''}}">
                    <a href="javascript:void(0)"
                       ng-click="vm.onPick(step, $event)">
                        <i ng-if="::step.icon" class="{{::$eval(step.icon)}}"></i>
                        <span>
                            {{::$eval(step.title)|textOrTranslate:$eval(step.titleTranslate)}}
                        </span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tabs-content">
            <div ng-click="vm.scrollRight()"
                 class="slide-handler left-slide-handler">
                <i class="fa fa-chevron-right"></i>
            </div>
            <div ng-click="vm.scrollLeft()"
                 class="slide-handler right-slide-handler">
                <i class="fa fa-chevron-left"></i>
            </div>
            <div class="tab-content clearfix active"
                 ng-if="step === vm.selectedStep"
                 ng-repeat="step in steps">
                <div ng-repeat="section in ::step.sections" class="section">
                    <div class="section-content {{::$eval(section.name)}}">
                        <div class="section-content-column"
                             ng-repeat="column in ::section.columns">
                            <div ng-repeat="button in ::column.buttons"
                                 class="button {{::button.inline?'inline':''}} {{::button.toggle?'toggle-button':''}} {{button.toggleState ? 'active' : ''}} {{::$eval(button.cssClass)}}">
                                <button ng-disabled="button.disabled"
                                        ng-click="vm.onAction(button)">
                                    <i class="{{::$eval(button.icon)}}"></i>
                                    <span>
                                    {{::$eval(button.title)|textOrTranslate:$eval(button.titleTranslate)}}
                                </span>
                                </button>
                            </div>
                        </div>
                        <div ng-if="::!section.columns.length">
                            <div ng-repeat-start="button in ::section.buttons"
                                 ng-if="::!button.buttons.length"
                                 class="{{vm.getButtonClass(button)}}">
                                <button ng-disabled="!button.enabled"
                                        ng-click="vm.onAction(button)">
                                    <i class="{{::$eval(button.icon)}}"></i>
                                    <span>
                                    {{::$eval(button.title)|textOrTranslate:$eval(button.titleTranslate)}}
                                </span>
                                </button>
                            </div>
                            <div ng-repeat-end=""
                                 ng-if="::button.buttons.length"
                                 class="af-drop-menu drop-button af-component {{$eval(button.enabled.toString()) ? '' : 'disabled'}} {{::$eval(button.cssClass)}}">
                                <a ng-click="vm.onExpandButton(button, $event)"
                                   class="drop-handler {{button.expand?'active': ''}}" href="javascript:void(0)">
                                    <i class="{{::$eval(button.icon)}}"></i>
                                    <span>
                                    {{::$eval(button.title)|textOrTranslate:$eval(button.titleTranslate)}}
                                </span>
                                    <i class="fa fa-caret-down"></i>
                                    <ul class="menu-items">
                                        <li ng-repeat="sub in ::button.buttons"
                                            ng-click="vm.onAction(sub)">
                                            <div>
                                                <i class="{{::$eval(sub.icon)}}"></i>
                                                <span class="menu-item-title">
                                                {{::$eval(sub.title)|textOrTranslate:$eval(sub.titleTranslate)}}
                                            </span>
                                            </div>
                                        </li>
                                    </ul>
                                </a>
                            </div>
                        </div>
                        <div class="section-label">
                            {{::($eval(section.title)|textOrTranslate:$eval(section.titleTranslate))}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>