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
-
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',
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: {}
}
- 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
- 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
- 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.
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
grunt
and ensure there are no errors. - 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.