Come creare una barra di navigazione orizzontale per materiale angolare

Question

È la prima volta che utilizzo Angular Material e sto solo chiedendo se voi ragazzi potete aiutarmi ad aggiungere una barra di navigazione orizzontale per il mio progetto usando Angular Material? Ho qualche problema a cercarne uno. Grazie in anticipo! Rimanere impressionante :)

Answer 1

Guardate questo esempio:

<div layout="row" layout-padding class="bg-dark-blue nav-dark" layout-align="space-between center"> 
<div> 
    <md-button>Home</md-button> 
    <md-button>Item 1</md-button> 
    <md-button>Item 2</md-button> 
    <md-menu> 
     <md-button md-menu-origin ng-click="$mdOpenMenu()">Help</md-button> 
     <md-menu-content width="2"> 
      <md-menu-item> 
       <md-button>Help</md-button> 
      </md-menu-item> 
      <md-menu-item> 
       <md-button>About</md-button> 
      </md-menu-item> 
     </md-menu-content> 
    </md-menu> 
</div> 
<div class="nav-buttons"> 
    <md-button class="md-raised md-accent">My profile</md-button> 
    <md-button class="md-raised md-warn">Log Out</md-button> 
</div> 

alcuni dei suoi corsi sono solo per colorare il contenuto, non prestare attenzione a molto a loro :)

Answer 2

Come da the official documentation, la creazione della barra di navigazione orizzontale è facile come usare uno md-toolbar.

<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;"> 
<h2>Sample navbar</h2> 
</md-toolbar>` 

È possibile aggiungere il numero di elementi che si desidera all'interno della barra di navigazione e l'allineamento di ogni oggetti possono essere fissati mediante <span flex></span>.

Nello span flex possiamo anche specificare valori per allineamenti specifici.

Answer 3

Questo è come u creare una barra di navigazione in materiale angolare: (ho usato angolare-materiali-icons anche qui :)

<md-content class="md-padding" style="background:#086A87"> 
    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> 
     <md-nav-item md-nav-click="goto('page1')" name="page1"> 
       <ng-md-icon icon="phone" style="fill:wheat" size="20"></ng-md-icon>Personal Information 
     </md-nav-item> 
     <md-nav-item md-nav-click="goto('page2')" name="page2"> 
       <ng-md-icon icon="mode_edit" style="fill: wheat" size="20"></ng-md-icon>Edit 
     </md-nav-item> 
     <md-nav-item md-nav-click="goto('page3')" name="page3"> 
       <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail1 
     </md-nav-item> 
     <md-nav-item md-nav-click="goto('page4')" name="page4"> 
       <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail2  
     </md-nav-item> 
    </md-nav-bar> 
</md-content>