Come creare una barra di navigazione reattiva usando il materiale angolare 2?

Question

Sto provando a creare una barra di navigazione utilizzando materiale angolare 2 che collassa in piccoli schermi come dispositivi mobili e tablet. Sono stato in grado di trovare solo pulsante md ma non md-menu-bar come era in materiale angolare

Answer 1

Ecco cosa ho utilizzato per creare il mio reattivo nav-bar utilizzando Angular2 + Material 2 e flex-layout nell'app angular-cli.

(Si prega di visitare Install Angular Material and Angular CDK)

1) Installare flex-layout di

npm install @angular/flex-layout -save 

2) Includere flex-layout di nel app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout"; 

3) Importa

imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
RoutingModule, 
FlexLayoutModule, 
MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules). 
], 

app.component.html

<mat-toolbar color="primary"> 
 

 
    <button mat-button routerLink="/"> 
 
    <mat-icon>home</mat-icon> 
 
     {{title}}</button> 
 

 
    <!-- This fills the remaining space of the current row --> 
 
    <span class="fill-remaining-space"></span> 
 
    <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
 
     <button mat-button routerLink="/products">Products</button> 
 
     <button mat-button routerLink="/dashboard">Dashboard</button> 
 
    </div> 
 
    <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm> 
 
    <mat-icon>menu</mat-icon> 
 
    </button> 
 

 
</mat-toolbar> 
 
<mat-menu x-position="before" #menu="matMenu"> 
 
    <button mat-menu-item routerLink="/products">Products</button> 
 
    <button mat-menu-item routerLink="/dashboard">Dashboard</button> 
 
    <!--<button mat-menu-item>Help</button>--> 
 
</mat-menu>

app.component.css

.fill-remaining-space { 
 
    /*This fills the remaining space, by using flexbox. 
 
    Every toolbar row uses a flexbox row layout. */ 
 
    flex: 1 1 auto; 
 
}

Nota: per testare, ridimensiona la tua pagina.

un'occhiata a flex-layout docs

Answer 2

Dai un'occhiata al progetto angular2-material su github. Ecco un elenco dei componenti di progettazione dei materiali hanno pubblicato finora:

https://www.npmjs.com/~angular2-material

Inoltre, penso che sia md-sidenav o md-toolbar è quello che state cercando.

md-sidenav - https://www.npmjs.com/package/@angular2-material/sidenav

md-toolbar - https://www.npmjs.com/package/@angular2-material/toolbar

Nota: Il progetto è ancora in versione alfa che significa che ci possono essere rottura cambiamenti nel loro API. Non raccomandato per l'uso in produzione.

Answer 3

mio greggio tentativo di modificare la risposta con una barra degli strumenti con l'attuazione cassetto con i nuovi nomi dei componenti come di angolare materiale 5.0.2

di fare: necessità di ottenere i CSS di tutti i collegamenti di intestazione fissi. L'icona del menu dovrebbe essere trasparente.

https://responsivematerial2.stackblitz.io/

.mat-sidenav-container { 
 
    background: rgba(0, 0, 0, 0.08); 
 
} 
 

 
.blank-grow { 
 
    flex: 1 1 auto; 
 
}

<mat-sidenav-container fullscreen> 
 
    <mat-sidenav #sidenav> 
 
    <mat-nav-list> 
 
     <a mat-list-item> 
 
     <mat-icon mat-list-icon>home</mat-icon> 
 
     <span mat-line>home</span> 
 
     </a> 
 

 
     <a mat-list-item> 
 
     <mat-icon mat-list-icon>backup</mat-icon> 
 
     <span mat-line>Backup</span> 
 
     </a> 
 
    </mat-nav-list> 
 
    </mat-sidenav> 
 
    <mat-toolbar color="primary"> 
 
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-sm> 
 
     <mat-icon>menu</mat-icon> 
 
    </button> 
 
    <span> Big Header</span> 
 
    <span class="blank-grow"></span> 
 
    <div fxLayout="row" fxShow="false" fxShow.gt-sm> 
 
     <a> 
 
     <mat-icon mat-list-icon>home</mat-icon> 
 
     <span mat-line>home</span> 
 
     </a> 
 

 
     <a> 
 
     <mat-icon mat-list-icon>backup</mat-icon> 
 
     <span mat-line>Backup</span> 
 
     </a> 
 
    </div> 
 
    </mat-toolbar> 
 
</mat-sidenav-container>