Skip to content

Instantly share code, notes, and snippets.

@damko
Created December 28, 2014 14:42
Show Gist options
  • Save damko/a0391acb67c9966a3742 to your computer and use it in GitHub Desktop.
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
.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;
}
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);
};
});
<!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>
@Jayaramki
Copy link

Awesome... Working perfectly. http://jsbin.com/goqeqisemu/1/

@rajkishor09
Copy link

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?

@deepakk87
Copy link

i want to add diiv in content

@htdivya
Copy link

htdivya commented Mar 9, 2017

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.

@Noushid
Copy link

Noushid commented Oct 2, 2017

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