md-nav-barの使い方は？

Question

私は角材料md-nav-barを使用していますが、これらの問題があります。

1）ページの中央に追加します。

2）私はそれが

それを行うにはすべての可能な方法はあり、今どのように見えるかを示すために画像を添付したNAV-アイテム

にページを追加する方法を知りたいですか？

ありがとうございました。おかげで、ここで

Answer 1

あなたが行く - CodePen

• 配列とmd-nav-item使用ng-repeatを追加し、アレイ

マークアップ

に追加するには md-nav-bar使用 layout

を中央に

<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

は、あなたが最初にNAV-項目の開始と最後のnav-項目の終了前に<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>