如何正确使用md-nav-bar？

Question

我正在使用角度材料md-nav-bar，我遇到了这些问题。

1）我想将它添加到页面中间。

2）我想知道如何将页面添加到nav-items

我附上了一张图片来展示它现在的样子

有没有办法做到这一点？

任何帮助都非常感谢。谢谢，

Answer 1

你去了 - CodePen

• 以md-nav-bar使用layout
为中心
• 使用数组添加md-nav-item使用ng-repeat并添加到数组

标记

<div ng-controller="AppCtrl" ng-app="MyApp" layout-fill layout="column" ng-cloak>
  <div layout="row" layout-align="center" flex="70">
    <md-content class="md-padding">
      <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
        <md-nav-item ng-repeat="item in navItems" md-nav-click="goto('{{item.value}}')" name="{{item.value}}">{{item.label}}</md-nav-item>
      </md-nav-bar>
      <span>{{currentNavItem}}</span>
    </md-content>
  </div>
  <div>
    <md-button class="md-raised md-primary" ng-click="addItem()">Add Item</md-button>
  </div>
</div>

JS

(function() {
  'use strict';

  angular.module('MyApp',['ngMaterial'])
      .controller('AppCtrl', AppCtrl);

  function AppCtrl($scope, $element, $compile) {
    $scope.currentNavItem = 'page1';

    $scope.navItems = [
      {value: "page1", label: "Page One"},
      {value: "page2", label: "Page Two"},
      {value: "page3", label: "Page Three"},
    ];

    $scope.addItem = function () {
      $scope.navItems.push(
        {
          value: "page" + ($scope.navItems.length + 1),
          label: "Page" + ($scope.navItems.length + 1)
        }
      );
    }
  }
})();

Answer 2

要将导航栏元素设置到页面中心，您可以在第一个导航项的开头和最后一个导航项的结尾之前添加<span flex></span>标签。

供您参考：

    <md-nav-bar>

    <span flex></span>

    <md-nav-item>
    </md-nav-item>

    <md-nav-item>
    </md-nav-item>

    <span flex></span>

    </md-nav-bar>