Created
December 28, 2014 14:42
-
-
Save damko/a0391acb67c9966a3742 to your computer and use it in GitHub Desktop.
angularjs UI - Vertical tabs stacked on the left - tab content on the right
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .nav, .pagination, .carousel, .panel-title a { cursor: pointer; } | |
| .ng-isolate-scope > .nav-tabs { | |
| border-bottom: 0; | |
| } | |
| .tab-content > .tab-pane, | |
| .pill-content > .pill-pane { | |
| display: none; | |
| } | |
| .tab-content > .active, | |
| .pill-content > .active { | |
| display: block; | |
| } | |
| .ng-isolate-scope > .nav-tabs > li { | |
| float: none; | |
| } | |
| .ng-isolate-scope > .nav-tabs > li > a { | |
| min-width: 74px; | |
| margin-right: 0; | |
| margin-bottom: 3px; | |
| } | |
| .ng-isolate-scope > .nav-tabs { | |
| float: left; | |
| margin-right: 19px; | |
| border-right: 1px solid #ddd; | |
| } | |
| .ng-isolate-scope > .nav-tabs > li > a { | |
| margin-right: -1px; | |
| -webkit-border-radius: 4px 0 0 4px; | |
| -moz-border-radius: 4px 0 0 4px; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| .ng-isolate-scope > .nav-tabs > li > a:hover, | |
| .ng-isolate-scope > .nav-tabs > li > a:focus { | |
| border-color: #eeeeee #dddddd #eeeeee #eeeeee; | |
| } | |
| .ng-isolate-scope > .nav-tabs .active > a, | |
| .ng-isolate-scope > .nav-tabs .active > a:hover, | |
| .ng-isolate-scope > .nav-tabs .active > a:focus { | |
| border-color: #ddd transparent #ddd #ddd; | |
| border-right-color: #ffffff; | |
| } | |
| .ng-isolate-scope > .tab-content > .tab-pane .active { | |
| border-color: #ddd transparent #ddd #ddd; | |
| border-left-color: #ffffff; | |
| } | |
| .ng-isolate-scope > .tab-content > .tab-pane > .tab-text { | |
| padding-top: 10px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('ui.bootstrap.demo', ['ui.bootstrap']); | |
| angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { | |
| $scope.tabs = [ | |
| { | |
| id: 1, | |
| title:'Dynamic Title 1', | |
| content:'Dynamic content 1' | |
| }, | |
| { | |
| id: 2, | |
| title:'Dynamic Title 2', | |
| content:'Dynamic content 2', | |
| disabled: true | |
| }, | |
| { | |
| id: 3, | |
| title:'Dynamic Title 3', | |
| content:'Dynamic content 3' | |
| }, | |
| { | |
| id: 4, | |
| title:'Dynamic Title 4', | |
| content:'Dynamic content 4' | |
| }, | |
| { | |
| id: 5, | |
| title:'Dynamic Title 5', | |
| content:'Dynamic content 5' | |
| }, | |
| { | |
| id: 6, | |
| title:'Dynamic Title 6', | |
| content:'Dynamic content 6' | |
| }, | |
| ]; | |
| $scope.selectTab = function(tabId) { | |
| console.log('Selected tab: ' + tabId); | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html ng-app="ui.bootstrap.demo"> | |
| <head> | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> | |
| <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> | |
| <script src="js/example.js"></script> | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="css/example.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid" ng-controller="TabsDemoCtrl"> | |
| <div class="row"> | |
| <h3>Vertical Tabs</h3> | |
| <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 thumbnail"> | |
| <tabset> | |
| <tab / | |
| ng-repeat="tab in tabs" | |
| ng-attr-id="{{tab.id}}" | |
| heading="{{tab.title}}" | |
| active="tab.active" | |
| disabled="tab.disabled" | |
| select="selectTab(tab.id)"> | |
| <div class="tab-text"> | |
| {{tab.content}} | |
| </div> | |
| </tab> | |
| </tabset> | |
| </div> <!-- /col --> | |
| </div> <!-- /row --> | |
| </div><!-- container --> | |
| </body> | |
| </html> |
i want tabs to take full page height and if any tab-content height is greater than tab height then scrollbar should appear. How I can do this?
i want to add diiv in content
If I try the above code in Eclipse, the code is working fine. But if I copy this files in a folder, then I am not able to see the tabs. Please help with this.
How to change active <li> background-color?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Awesome... Working perfectly. http://jsbin.com/goqeqisemu/1/