In this article, we discuss bootstrap nav tabs in angular js

bootstrap nav tabs in angularjs

bootstrap nav-tabs in angularjs

Documentation and examples for how to use Bootstrap included navigation components.

Navigation available in Bootstrap shares general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base .nav the component is built with flexbox and provides a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with an <nav> element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

Force your .nav’s contents to extend the full available width of one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

If you need responsive nav variations, consider using a series of flexbox utilities. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint Active

HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='TestCtrl'>
    <div class="tabbable tabs-left">
      <ul class="nav nav-tabs">
         <li ng-class="getTabClass(1)" ng-click="setActiveTab(1)"><a href="#deal" data-toggle="tab">Deal</a></li>
         <li ng-class="getTabClass(2)" ng-click="setActiveTab(2)"><a href="#bond" data-toggle="tab">Bond</a></li>
         <li ng-class="getTabClass(3)" ng-click="setActiveTab(3)"><a href="#collateral" data-toggle="tab">Collateral</a></li>
         <li ng-class="getTabClass(4)" ng-click="setActiveTab(4)"><a href="#rating" data-toggle="tab">Rating</a></li>
      </ul>
      <div class="tab-content">
        <div ng-class="getTabPaneClass(1)" id="deal">    
            {{tab1}}
         </div>       
        
        <div ng-class="getTabPaneClass(2)" id="bond">     
          {{tab2}}
        </div>
        
        <div ng-class="getTabPaneClass(3)" id="collateral">     
          {{tab3}}
        </div>
        
        <div ng-class="getTabPaneClass(4)" id="rating">     
          {{tab4}}
        </div>      
      
      </div>
    </div>

  </body>

</html>

Script.js

var myApp = angular.module('app',[]);

myApp.controller('TestCtrl', function($scope){
  var tabClasses;
  
  function initTabs() {
    tabClasses = ["","","",""];
  }
  
  $scope.getTabClass = function (tabNum) {
    return tabClasses[tabNum];
  };
  
  $scope.getTabPaneClass = function (tabNum) {
    return "tab-pane " + tabClasses[tabNum];
  }
  
  $scope.setActiveTab = function (tabNum) {
    initTabs();
    tabClasses[tabNum] = "active";
  };
  
  $scope.tab1 = "This is first section";
  $scope.tab2 = "This is SECOND section";
  $scope.tab3 = "This is THIRD section";
  $scope.tab4 = "This is FOURTH section";
  
  //Initialize 
  initTabs();
  $scope.setActiveTab(1);
});

Output

bootstrap nav tabs in angularjs

Also Read Bootstrap 4 Tabs and Pills Nav Component

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *