Question

如何拉伸md-nav-item元素

pic1
------------------------------------------------
| ITEM1 | ITEM 2 |
------------------------------------------------

pic 2
------------------------------------------------
|         ITEM1        |          ITEM 2       |
------------------------------------------------

以下是我使用

的示例代码

<div>
<md-content class="md-padding" >
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
    <md-nav-item md-nav-href="#activity" name="activity">Activity</md-nav-item>
    <md-nav-item md-nav-href="#feeds" name="feeds">Feeds</md-nav-item>      
    </md-nav-bar>
</md-content>
</div>

Answer 1

您可以通过设置

来执行此操作

 <div layout="row" layout-align="center" flex="50">

<强>样本

＆＃13;

<html>

<head>
  <title>angular material switch</title>
  <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
</head>

<body>
  <div ng-app="app" ng-controller="ctrl">
    <div>
      <md-content class="md-padding">
        <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
          <div layout="row" layout-align="center" flex="50">
          <md-nav-item md-nav-href="#activity" name="activity">Activity</md-nav-item>
          </div>
          <div layout="row" layout-align="center" flex="50">
          <md-nav-item md-nav-href="#feeds" name="feeds">Feeds</md-nav-item>
          </div>
        </md-nav-bar>
      </md-content>
    </div>

  </div>


  <!-- Angular Material Dependencies -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

  <!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
  <script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>


  <script>
    var app = angular.module('app', ['ngMaterial']);

    app.controller("ctrl", function($scope) {
      $scope.toggle = false;
      $scope.selectedIndex = 0;
    });
  </script>
</body>

</html>

＆＃13;

Answer 2

将自定义类添加到md-nav-bar

<md-nav-bar class="stretch-tabs">
...
</md-nav-bar>

...并添加一些css来覆盖标签的宽度（蓝色下划线也是拉伸的，整个标签是可点击的）

.stretch-tabs ul {
    display: table;
    width: 100%;
}

.stretch-tabs li {
    display: table-cell;
}

.stretch-tabs a {
    width: 100%;
}

.stretch-tabs :first-of-type {
    margin: 0;
}

演示应用

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

.stretch-tabs ul {
  display: table;
  width: 100%;
}

.stretch-tabs li {
  display: table-cell;
}

.stretch-tabs a {
  width: 100%;
}

.stretch-tabs :first-of-type {
  margin: 0;
}

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>

<body ng-app="app">
  <md-nav-bar nav-bar-aria-label="navigation links" md-selected-nav-item="selectedItem" class="stretch-tabs">
    <md-nav-item md-nav-href="#test1" name="test1">Test 1</md-nav-item>
    <md-nav-item md-nav-href="#test2" name="test2">Test 2</md-nav-item>
    <md-nav-item md-nav-href="#test3" name="test3">Test 3</md-nav-item>
  </md-nav-bar>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>

</body>

</html>

如何拉伸md-nav-item角度材质

2 个答案: