Skip to content

Instantly share code, notes, and snippets.

@damko

damko/example.css

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.
Download ZIP

Revisions

  1. Damiano Venturin created this gist Dec 28, 2014.
    61 changes: 61 additions & 0 deletions example.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    .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;
    }
    40 changes: 40 additions & 0 deletions example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    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);
    };
    });
    40 changes: 40 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!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>