Tabs & Pane directives for angular
bower install angular-tabs
-
Include tabs.js and tabs.css into your app.
-
Add platypus.tabs as a module dependency to your app :
[...] [...] [...] [...]angular.module('YOUR_APP', ['platypus.tabs'])
Tab content is only loaded when tab is visible, and discarded as soon as tab is left, ensuring you are not requesting precious resources for nothing
Current tab is synced into the URL's anchor, so that a refresh, copy/pasting of the URL will bring you back to the proper tab.
You should be using HTML5 mode for location :
$locationProvider.html5Mode(true);
Using flexbox, the tabs tries to adjust themselves in regard to the available space, truncating text whenever needed.