Angular-Material: md-stretch-tabs 错误

Question

我目前正在开发基于 angular 的应用程序。

问题：我将 md-stretch-tabs 添加到我的 md-tabs 元素，但是，当我切换到选项卡 #2 时，我的选项卡缩回，就像 space 不够 flex . 是依赖的问题还是代码本身的问题？

编辑：添加了完整代码。

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

app.controller('SideNavController', function($scope, $mdSidenav) {
 $scope.openLeftMenu = function() {
  $mdSidenav('left').toggle();
 };
 $scope.closeLeftMenu = function() {
  $mdSidenav('left').toggle();
 };
});

app.config(function ($mdThemingProvider) {
 var customPrimary = {
  '50': '#7099cd',
  '100': '#5d8bc7',
  '200': '#4a7ec0',
  '300': '#3e71b3',
  '400': '#3865a0',
  '500': '#31598d',
  '600': '#2a4d7a',
  '700': '#244167',
  '800': '#1d3554',
  '900': '#172941',
  'A100': '#83a6d4',
  'A200': '#96b4db',
  'A400': '#a9c1e1',
  'A700': '#101d2e',
  'contrastDefaultColor': 'light'
 };
 $mdThemingProvider
 .definePalette('customPrimary', 
              customPrimary);

 var customAccent = {
        '50': '#1c5956',
        '100': '#226d68',
        '200': '#28807b',
        '300': '#2e948e',
        '400': '#34a7a1',
        '500': '#3abab3',
        '600': '#5bccc6',
        '700': '#6fd2cd',
        '800': '#82d8d3',
        '900': '#96deda',
        'A100': '#5bccc6',
        'A200': '#48c6bf',
        'A400': '#3abab3',
        'A700': '#a9e4e1',
  'contrastDefaultColor': 'light'
 };
 $mdThemingProvider
 .definePalette('customAccent', 
              customAccent);

 var customWarn = {
  '50': '#f7d1cb',
  '100': '#f4bdb5',
  '200': '#f1a99f',
  '300': '#ee9688',
  '400': '#ea8272',
  '500': '#e76e5c',
  '600': '#e45a46',
  '700': '#e04630',
  '800': '#d73720',
  '900': '#c1321c',
  'A100': '#fbe5e1',
  'A200': '#fef8f8',
  'A400': '#ffffff',
  'A700': '#aa2c19',
  'contrastDefaultColor': 'dark'

 
 };
 $mdThemingProvider
 .definePalette('customWarn', 
              customWarn);

 $mdThemingProvider.theme('default')
 .primaryPalette('customPrimary')
 .accentPalette('customAccent')
 .warnPalette('customWarn');
});

<html lang="en" >
<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 <!-- Angular Material style sheet -->
 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>


<!--======================================================================================================================================-->
<!--
<md-icon md-font-set="material-icons">face</md-icon>
<i class="material-icons">menu</i>
-->
<!--======================================================================================================================================-->



<body ng-app="BetaApp" ng-cloak layout="column" ng-controller="SideNavController">

 <md-toolbar md-whiteframe="3">
  <div class="md-toolbar-tools">
   <md-button class="md-icon-button" aria-label="More" ng-click="openLeftMenu()">
    <i class="material-icons">menu</i>
   </md-button>
   <span>WideView</span>
   <!-- fill up the space between left and right area -->
   <span flex></span>
   <md-button class="md-icon-button">
    <i class="material-icons">search</i>
   </md-button>
   <md-button class="md-icon-button">
    <i class="material-icons">filter_list</i>
   </md-button>
   <md-menu md-position-mode="target-right target">
    <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
     <i class="material-icons">more_vert</i>
    </md-button>
    <md-menu-content>
     <md-menu-item>
      <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">refresh</md-icon>Refresh</md-button>
     </md-menu-item>
     <md-menu-item>
      <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">view_quilt</md-icon>Change View</md-button>
     </md-menu-item>
    </md-menu-content>
   </md-menu>
   
  </div>
 </md-toolbar>

 <div layout="row" flex>
  <md-content>


   <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <span flex></span>
         <md-input-container class="md-block" flex>
          <label>Address</label>
          <input>
        </md-input-container>
        <md-input-container class="md-block" flex>
          <label>Address</label>
          <input>
        </md-input-container>
        </md-content>
      </md-tab>
    </md-tabs>


  </md-content>



  <md-fab-speed-dial md-direction="up" class="md-scale md-fab-bottom-right">
   <md-fab-trigger>
    <md-button aria-label="" class="md-accent md-fab">  
     <i class="material-icons">add</i>   
    </md-button>
   </md-fab-trigger>
   <md-fab-actions>
    <md-button aria-label="" class="md-fab md-raised md-mini">
     <i class="material-icons">share</i>  
    </md-button>
    <md-button aria-label="" class="md-fab md-raised md-mini">
     <i class="material-icons md-accent">add_a_photo</i>   
    </md-button>
    <md-button aria-label="" class="md-fab md-raised md-mini">
     <i class="material-icons">create</i>   
    </md-button>
   </md-fab-actions>
  </md-fab-speed-dial>




  <md-sidenav md-component-id="left" class="md-sidenav-left" md-whiteframe="3" layout="column">
   <div layout="row">
    <md-button class="md-icon-button">
     <md-icon md-font-set="material-icons">new_releases</md-icon>
    </md-button>
    <span flex></span>
    <md-button class="md-icon-button" ng-click="closeLeftMenu()">
     <md-icon md-font-set="material-icons">arrow_forward</md-icon>
    </md-button>

   </div>
   <md-card md-whiteframe="2">
    <md-card-header>

     <md-card-avatar>
      <img class="md-user-avatar" src="images/BigDave.png"/>
     </md-card-avatar>
     <md-card-header-text>
      <div layout="row">
       <div layout="column">
        <span class="md-title">BigDave</span>
        <span class="md-subhead">logged in</span>
       </div>
       <span flex></span>
       <md-menu md-position-mode="target-right target">
        <md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
         <i class="material-icons">arrow_drop_down</i>
        </md-button>
        <md-menu-content>
         <md-menu-item>
          <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">account_box</md-icon>Settings</md-button>
         </md-menu-item>
         <md-menu-item>
          <md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">exit_to_app</md-icon>Log out</md-button>
         </md-menu-item>
        </md-menu-content>
       </md-menu>
      </div>
     </md-card-header-text>
    </md-card-header>
   </md-card>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<a class="ms-navigation-button ng-scope md-default-theme"e>
<i class="icon s16 icon-calendar-today" ng-if="node.icon"></i>
<span class="title ng-scope ng-binding flex" translate="" flex="">Calendar</span>
 </a>
  </md-sidenav>

  


  


 </div>


 <!--======================================================================================================================================-->


 <!-- Angular Material requires Angular.js Libraries -->
 <script src="node_modules/angular/angular.min.js"></script>
 <script src="node_modules/angular-animate/angular-animate.min.js"></script>
 <script src="node_modules/angular-aria/angular-aria.min.js"></script>
 <script src="node_modules/angular-messages/angular-messages.min.js"></script>

 <!-- Angular Material Library -->
 <script src="node_modules/angular-material/angular-material.min.js"></script>

 <!-- Your application bootstrap  -->
 <script type="text/javascript" src="js/main.js"></script>

</body>
</html>

Answer 1

问题是 div 的属性，其中包含您的 md-tabs:

<div layout="row" flex>

如果你只用这个替换它

<div>

它工作正常 - CodePen

Angular-Material: md-stretch-tabs 错误

Angular-Material: Error with md-stretch-tabs

html

javascript

angularjs

angular-material