Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
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.
The npm package angular-ui-router-tabs receives a total of 0 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.