npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-ui-router-tabs

v2.0.2

Published

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

Downloads

3,212

Readme

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',
        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: {}
    }
  1. 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.