Ribbon JS

HTML5, CSS3 and JavaScript Ribbon Bar. State-of-the-art UI. By Martin Ivanov.

Using AngularJS Directives with Ribbon JS

Stepping away from jQuery? Try VueRibbon, built on top of Vue and ES6.

Since version 4.3.0 Ribbon JS supports AngularJS directives, applied to its boundingBox, tabs and tab ribbons. Both types of declarations (ng-* and data-ng-*) are supported.

Setting AngularJS Directives

Below is an example of setting AngularJS directives in the config object of Ribbon JS. Check the demo here.

AngularJS and HTML5-compatible Directive Declaration:

// ng-* style ng: { controller: "myRibbon", init: "" } // data-ng-* style (HTML5 compatible) ng: { "data-ng-if": "lang == 'JavaScript' || key == 'HTML5'", "data-ng-show": "", "data-ng-model": "user.name", }

Go back to the docs home.