angular-ui-router-tabs

WebJar for angular-ui-router-tabs

License	MIT
Categories	Angular User Interface Web Frameworks
GroupId	org.webjars.bower
ArtifactId	angular-ui-router-tabs
Last Version	2.0.2
Release Date	Feb 14, 2017
Type	jar
Description	angular-ui-router-tabs WebJar for angular-ui-router-tabs
Project URL	http://webjars.org
Source Code Management	https://github.com/rpocklin/ui-router-tabs

Download angular-ui-router-tabs

Filename	Size
angular-ui-router-tabs-2.0.2.pom
angular-ui-router-tabs-2.0.2.jar	7 KB
angular-ui-router-tabs-2.0.2-sources.jar	22 bytes
angular-ui-router-tabs-2.0.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-router-tabs/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ui-router-tabs</artifactId>
    <version>2.0.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-router-tabs/
implementation 'org.webjars.bower:angular-ui-router-tabs:2.0.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-router-tabs/
implementation ("org.webjars.bower:angular-ui-router-tabs:2.0.2")

Apache Buildr

'org.webjars.bower:angular-ui-router-tabs:jar:2.0.2'

Apache Ivy

<dependency org="org.webjars.bower" name="angular-ui-router-tabs" rev="2.0.2">
  <artifact name="angular-ui-router-tabs" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='angular-ui-router-tabs', version='2.0.2')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "angular-ui-router-tabs" % "2.0.2"

Leiningen

[org.webjars.bower/angular-ui-router-tabs "2.0.2"]

Dependencies

compile (4)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1.4.0,2)
org.webjars.bower : angular-bootstrap	jar	[1.2.1,2)
org.webjars.bower : angular-ui-router	jar	[0.2.14,0.3)
org.webjars.bower : angular-sanitize	jar	[1.4.0,2)

Project Modules

There are no modules declared in this project.

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'
    });

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.

Versions

Version
2.0.2 Feb 14, 2017
1.7.0 Nov 20, 2015
1.5.0 Jul 10, 2015