
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
angular-ui-router-tabs
Advanced tools
Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router.
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.
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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.