Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
angular-ui-router-tabs
Advanced tools
Readme
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'
});
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: {}
}
<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-view
containing the tabs with the default (first) element as the sub-route example/#/user/settings
in the example.)template-url="my_template.html"
on the <tabs>
element.disable: true
in the tabData
(can be dynamically set).<tab-heading>
in a custom directive template to add any HTML into the tab title (eg. icons)tabData
variable dynamically, if you want to.<tabs>
tag around to wherever you want the tab listing to appear. (left-positioned is the best spot to enable responsive design.).tab
, an active tab will have the active
class.git clone git@github.com:rpocklin/ui-router-tabs.git
npm install
bower install
grunt serve
http://localhost:9000/example/
in your browser to see the example.git checkout -b my-new-feature
)git commit -am 'Added some feature'
) - please consider adding tests!git push origin my-new-feature
)grunt
and ensure there are no errors.<ui-view>
placement in default template.<div>
).class
and template-url
attributes on uib-tab
and began using <uib-tab-heading>
tag.uib
prefix for UI Bootstrap elements (as per v0.14.0). See #47. disabled
attribute to disable
in line with UI Bootstrap <tab>
. See #39.bower_components
from repository. See #40.angular-bootstrap
dependency to v0.13.0 (fixes default tab being auto-selected).$stateChangeCancel
, $stateChangeError
and $stateNotFound
to reset active tab.$state.go(..)
route option, added disabled
option and updated jsbeautifier. See #16.strict-di
mode.ngTouch
. See #2.$stateChangeSuccess
watcher to update parent tab(s) when using ui-sref
or $state.go()
. See #1.Released under the MIT License. See the LICENSE file for further details.
FAQs
Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router.
The npm package angular-ui-router-tabs receives a total of 552 weekly downloads. As such, angular-ui-router-tabs popularity was classified as not popular.
We found that angular-ui-router-tabs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.