rpocklin
UI Router Tabs
Leverages UI Bootstrap and UI Router to give you full-strength route-driven tabs in Angular.js.
Example / Demo
How to Install / Usage
- Install the plugin into your Angular.js project, manually or via
bower install angular-ui-router-tabs Add
ui.router.tabsas a new module dependency in your angular app.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' });Define your
tabData(or similiar variable) in the root view controller of your tabs (ie.UserCtrlin the case above) Eg:$scope.tabData = [ { heading: 'Settings', route: 'user.settings' }, { heading: 'Accounts', route: 'user.accounts', disable: true } ];NOTE: You can also specify
paramsandoptionsto pass special parameters or options for the target route to UI Router, Eg:{ heading: 'Accounts', route: 'user.accounts', params: { accountId: account.id }, options: {} }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: booleanjustified: booleanclass: stringtemplateUrl: <template url name>
NOTE: If you use a custom template, you may need to define a
ui-viewplaceholder 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-viewcontaining the tabs with the default (first) element as the sub-routeexample/#/user/settingsin 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: truein thetabData(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
tabDatavariable 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 theactiveclass.
Running Locally
- Checkout git repository locally:
git clone git@github.com:rpocklin/ui-router-tabs.git npm installbower installgrunt serve- View
http://localhost:9000/example/in your browser to see the example.
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Added some feature') - please consider adding tests! - Push to the branch (
git push origin my-new-feature) - Run
gruntand ensure there are no errors. - 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
classandtemplate-urlattributes onuib-taband 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
uibprefix for UI Bootstrap elements (as per v0.14.0). See #47.
Upgraded angular-bootstrap to v14.0. - 1.6.0 Renamed
disabledattribute todisablein line with UI Bootstrap<tab>. See #39. - 1.5.1 Removed
bower_componentsfrom repository. See #40. - 1.5.0 Bumped
angular-bootstrapdependency to v0.13.0 (fixes default tab being auto-selected). - 1.4.3 Added handling of
$stateChangeCancel,$stateChangeErrorand$stateNotFoundto 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, addeddisabledoption 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-dimode. - 1.1.3 Fixed tab switching when using
ngTouch. See #2. - 1.1.2 Added
$stateChangeSuccesswatcher to update parent tab(s) when usingui-srefor$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.