Socket
Socket
Sign inDemoInstall

angular-ui-router-tabs

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-ui-router-tabs

Leverages [UI Bootstrap](http://angular-ui.github.io/bootstrap/) and [UI Router](https://github.com/angular-ui/ui-router) to give you full-strength route-driven tabs in Angular.js.


Version published
Weekly downloads
763
decreased by-1.93%
Maintainers
1
Weekly downloads
 
Created
Source

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'
    });
  1. 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',
        disabled: 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: {}
    }
  1. Declare the following in your the parent HTML view template <tabs data="tabData" type="tabs" />.

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

  • type: [ 'tabs' | 'pills' ]
  • vertical: boolean
  • justified: boolean
  1. 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 always select one tab by default. There is a fix in master for ui-bootstrap so this should be fixed by upgrading when a new version of this is released. See #ui-bootstrap-commit
  • You should link to the ui-view containing the tabs with the default (first) element as the sub-route (ie. 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 disabled: 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.
  • 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.).

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

  • 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.

FAQs

Package last updated on 06 Apr 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc