CODEWITHSUNDEEP
angularjsnavbarangular-material
Udara Herath
Udara Herath

Reputation: 885

How to use md-nav-bar correctly?

I'm using angular material md-nav-bar and i have those problems.

1) I want to add it to the middle of the page.

2) I want to know how to add pages to the nav-items

I have attached an image to show how it looks now enter image description here

Is there any possible way to do it?

Any help highly appreciate. Thanks,

Upvotes: 2

Views: 8591

Answers (2)

ethan_hunt
ethan_hunt

Reputation: 1

To get the navbar elements to the center of the page you can add the <span flex></span> tags before the start of the first nav-item and the end of the last nav-item.

For your reference:

    <md-nav-bar>

    <span flex></span>

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

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

    <span flex></span>

    </md-nav-bar>

Upvotes: 0

camden_kid
camden_kid

Reputation: 12813

Here you go - CodePen

  • To centre the md-nav-bar use layout
  • To add a md-nav-item use ng-repeat with an array and add to the array

Markup

<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)
        }
      );
    }
  }
})();

Upvotes: 2

Related Questions