Leverages UI Bootstrap and UI Router to give you full-strength route-driven tabs in Angular.js.
-
Install the plugin into your Angular.js project, manually or via
bower install angular-ui-router-tabs
-
Add
ui.router.tabs
as 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.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: {}
}
- 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>
.
- 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-routeexample/#/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 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
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 theactive
class.
- Checkout git repository locally:
git clone git@github.com:rpocklin/ui-router-tabs.git
npm install
bower install
grunt serve
- View
http://localhost:9000/example/
in your browser to see the example.
- 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
grunt
and ensure there are no errors. - Create a new Pull Request
- 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
andtemplate-url
attributes onuib-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 todisable
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, addeddisabled
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 usingui-sref
or$state.go()
. See #1. - 1.1.0 Added nested tab support (tabs within tabs)
- 1.0.0 Initial release
Released under the MIT License. See the LICENSE file for further details.