md-tabs with same content Angular Material

2
votes

I want to use the tabs provided from Angular Material in order to have two different options for my application. The tabs are located in the navbar of my application. However the tab switching should just trigger a click-event as the main content of both tabs is the same (below the navbar).

So now, I tried using the md-tabs without any content just with a ng-click, but that does not seem to work.

Oc I could use sime buttons in my navbar, but I want to have the annimation and the red line of the material tabs, which seems not possible with the buttons.

Anyone knows how to solve my problem?

Code right now: 

<md-content flex="" layout-padding="" class="md-small">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>
        <span ng-click="moveTo(53.534980, 9.975195)">Some Header</span>
      </h2>
      <span flex="5"></span>


        <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="top">
          <md-tab id="tab1">
            <md-tab-label>Item One</md-tab-label>
            <md-tab-body>
            </md-tab-body>
          </md-tab>
          <md-tab id="tab3">
            <md-tab-label>Item Three</md-tab-label>
            <md-tab-body>
            </md-tab-body>
          </md-tab>
        </md-tabs>

      <span flex=""></span>
      <md-button class="md-icon-button md-primary"  aria-label="Settings" ng-click="toggleRight()">
        <md-icon md-svg-icon="images/menu.svg"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
    <span flex></span>
</md-content>
2
angularjsmaterial-designangular-material
you mean toolbar when you say navbar? First of all, md-toolbar should be sibling of md-content - Sanjay Sahani
yes sorry. What do you mean with sibling? - threxx

2 Answers

2
votes

You can use md-on-select="dosomething()" on the tab.

    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="top">
      <md-tab id="tab1" md-on-select="doThis()">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>
        </md-tab-body>
      </md-tab>
      <md-tab id="tab3" md-on-select="doThat()">
        <md-tab-label>Item Three</md-tab-label>
        <md-tab-body>
        </md-tab-body>
      </md-tab>
    </md-tabs>
1
votes

@threxx this is what I mean. I hope this would work for you:

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>
        <span ng-click="moveTo(53.534980, 9.975195)">Some Header</span>
      </h2>
      <span flex=""></span>
      <md-button class="md-icon-button md-primary"  aria-label="Settings" ng-click="toggleRight()">
        <md-icon md-svg-icon="images/menu.svg"></md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-tabs class="md-primary" md-selected="data.selectedIndex" md-align-tabs="top">
         <md-tab id="tab1">
            <md-tab-label>Item One</md-tab-label>
            <md-tab-body>
              Hi
            </md-tab-body>
          </md-tab>
          <md-tab id="tab3">
            <md-tab-label>Item Three</md-tab-label>
            <md-tab-body>
              Hello
            </md-tab-body>
          </md-tab>
   </md-tabs>

  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('BlankApp', ['ngMaterial']);
  </script>
  
</body>
</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
-->