ui-router-tabs 0,0,0,0 travis-ci grunt Bower karma npm

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router

2 years after MIT

UI Router Tabs

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

Build Status Coverage Status     Gratipay

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 [email protected]: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.

Related Repositories

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-angularjs

awesome-angularjs

:cyclone: A list of awesome AngularJs services, directives, utilities and resour ...

cloudstack-ui

cloudstack-ui

Modern UI for Apache Cloudstack User Self Service Portal ...

df-tab-menu

df-tab-menu

AngularJS directive that provides responsive tabs with dropdown menu overflow ...


Top Contributors

rpocklin alexilyaev kravchina glsee cesarandreu stefanotorresi tlvince wesleycho tmont

Dependencies

package version
dev grunt ~0.4.1
grunt-autoprefixer ~0.7.3
grunt-cli ~0.1.13
grunt-contrib-connect ~0.8.0
grunt-contrib-jshint ~0.7.1
grunt-contrib-watch ~0.6.1
grunt-jsbeautifier ^0.2.10
grunt-karma ^0.12.2
grunt-karma-coveralls ~2.3.0
jshint-stylish ~0.1.3
karma ^0.13.22
karma-coverage ~0.2.4
karma-jasmine ~0.1.5
karma-ng-html2js-preprocessor ~0.1.0
karma-phantomjs-launcher ^1.0.0
load-grunt-tasks ~0.6.0
phantomjs-prebuilt ^2.1.7
static-site-generator-webpack-plugin ^2.0.1
time-grunt ~0.2.1

Releases

-   v2.0.2 zip tar
-   v2.0.1 zip tar
-   v2.0.0 zip tar
-   v1.8.0 zip tar
-   v1.7.0 zip tar
-   v1.6.0 zip tar
-   v1.5.1 zip tar
-   v1.5.0 zip tar
-   v1.4.3 zip tar
-   v1.4.2 zip tar
-   v1.4.1 zip tar
-   v1.4.0 zip tar
-   v1.3.0 zip tar
-   v1.2.0 zip tar
-   v1.1.4 zip tar
-   v1.1.3 zip tar
-   v1.1.2 zip tar
-   v1.1.0 zip tar
-   v1.0.2 zip tar
-   v1.0.1 zip tar
-   v1.0.0 zip tar
-   list zip tar