UI Router Tabs

Leverages UI Bootstrap and UI Router to give you full-strength route-driven tabs in Angular.js.

Example / Demo

Link

How to Install / Usage

1. Install the plugin into your Angular.js project, manually or via bower install angular-ui-router-tabs

2. Add ui.router.tabs as a new module dependency in your angular app.

3. Define your routes in a hierarchy that makes sense for a tabbed layout, Eg:

     $stateProvider.state('user', {
       url:         '',
       controller: 'UserCtrl',
       templateUrl: 'example.html'
     }).state('user.settings', {
       url:         '/user/settings',
       templateUrl: 'user/settings.html'
     }).state('user.accounts', {
       url:         '/user/accounts',
       templateUrl: 'user/accounts.html'
     });

4. Define your tabData (or similiar variable) in the root view controller of your tabs (ie. UserCtrl in the case above) Eg:

     $scope.tabData   = [
       {
         heading: 'Settings',
         route:   'user.settings'
       },
       {
         heading: 'Accounts',
         route:   'user.accounts',
         disable: true
       }
     ];

   NOTE: You can also specify params and options to pass special parameters or options for the target route to UI Router, Eg:

     {
       heading: 'Accounts',
       route:   'user.accounts',
       params:  {
                  accountId: account.id
                },
       options: {}
     }

5. Declare the following in your the parent HTML view template <tabs data="tabData" type="tabs"></tabs>.

   Optional attributes for the <tabs> (which are passed on to the UI Bootstrap component) are:

   • type: [ 'tabs' | 'pills' ]
   • vertical: boolean
   • justified: boolean
   • class: string
   • templateUrl: <template url name>

   NOTE: If you use a custom template, you may need to define a ui-view placeholder for the child content panes in the same HTML view template eg. <ui-view></ui-view>.

Tips

• UI Bootstrap Tabs will not select a tab by default. If you want it to, specify the target sub-route when you show the tabs (ie. link the ui-view containing the tabs with the default (first) element as the sub-route example/#/user/settings in the example.)
• You can override the default directive template by specifying template-url="my_template.html" on the <tabs> element.
• You can enable / disable tabs by specifying disable: true in the tabData (can be dynamically set).
• You can use <tab-heading> in a custom directive template to add any HTML into the tab title (eg. icons)
• You can update the tabData variable dynamically, if you want to.
• You can move the <tabs> tag around to wherever you want the tab listing to appear. (left-positioned is the best spot to enable responsive design.).
• Each tab will have a default class of tab, an active tab will have the active class.

Running Locally

1. Checkout git repository locally: git clone git@github.com:rpocklin/ui-router-tabs.git
2. npm install
3. bower install
4. grunt serve
5. View http://localhost:9000/example/ in your browser to see the example.

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Added some feature') - please consider adding tests!
4. Push to the branch (git push origin my-new-feature)
5. Run grunt and ensure there are no errors.
6. Create a new Pull Request

History

• 2.0.2 Fixed invalid <ui-view> placement in default template.
• 2.0.1 Fixed invalid html in default template (missing <div>).
• 2.0.0 Added class and template-url attributes on uib-tab and began using <uib-tab-heading> tag.
• 1.8.0 Added inline template by default (as requested) and allowed customer classes parameter.
• 1.7.0 Added uib prefix for UI Bootstrap elements (as per v0.14.0). See #47.
  Upgraded angular-bootstrap to v14.0.
• 1.6.0 Renamed disabled attribute to disable in line with UI Bootstrap <tab>. See #39.
• 1.5.1 Removed bower_components from repository. See #40.
• 1.5.0 Bumped angular-bootstrap dependency to v0.13.0 (fixes default tab being auto-selected).
• 1.4.3 Added handling of $stateChangeCancel, $stateChangeError and $stateNotFound to reset active tab.
• 1.4.2 Added feature to update tabs if state change event is cancelled. See #19.
• 1.4.1 Bumped angular-bootstrap dependency to v0.12.1.
• 1.4.0 Removed default $state.go(..) route option, added disabled option and updated jsbeautifier. See #16.
• 1.3.0 Improved state equality checking to include params and options.
• 1.2.0 Prevented reload of current state again. See #11.
• 1.1.4 Added support for strict-di mode.
• 1.1.3 Fixed tab switching when using ngTouch. See #2.
• 1.1.2 Added $stateChangeSuccess watcher to update parent tab(s) when using
  ui-sref or $state.go(). See #1.
• 1.1.0 Added nested tab support (tabs within tabs)
• 1.0.0 Initial release

License

Released under the MIT License. See the LICENSE file for further details.