Skip to content

Instantly share code, notes, and snippets.

@Jayaramki

Jayaramki/example.css

Forked from damko/example.css
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jayaramki/3b0104afced4f0bbb632 to your computer and use it in GitHub Desktop.
Save Jayaramki/3b0104afced4f0bbb632 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example.css
.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;
}
Raw
example.js
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);
};
});
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment