Как правильно использовать md-nav-bar?

Question

Я использую угловой материал md-nav-bar, и у меня есть эти проблемы.

1) Я хочу добавить его в середину страницы.

2) Я хочу знать, как добавлять страницы в nav-элементы

Я приложил изображение, чтобы показать, как оно выглядит сейчас

Есть ли какой-нибудь возможный способ сделать это?

Любую помощь высоко ценю. Спасибо,

Answer 1

Вот и все - CodePen

• Центрировать md-nav-bar использовать макет
• Чтобы добавить 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>