Wie man eine reaktive Nav-Bar mit eckigem Material 2 macht?

Question

Ich versuche, eine Navigationsleiste mit eckigen Material 2 zu erstellen, die in kleinen Bildschirmen wie mobilen Geräten und Tablets zusammenfällt. Ich konnte nur md-Taste, aber nicht md-Menüleiste finden, wie in eckigem Material

Answer 1

Hier ist, was ich verwendet habe, um meine reagierende nav-bar mit Angular2 + Material 2 und Flex-Layout in angular-cli App zu bauen.

(Bitte besuchen Install Angular Material and Angular CDK)

1) Installieren flex-Layout

npm install @angular/flex-layout -save 

2) Fügen Sie flex-Layout in Ihrem app.module.ts

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

3) Import

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

Hinweis: zu testen, Größe der Seite ändern

einen Blick auf flex-layout docs

Answer 2

Werfen Sie einen Blick auf angular2-material Projekt auf Github. Hier ist eine Liste von Materialdesign Komponenten, die sie veröffentlicht haben bisher:

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

Außerdem glaube ich, entweder md-sidenav oder md-toolbar ist das, was Sie suchen.

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

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

Hinweis: Das Projekt noch im Alpha-Release ist, was bedeutet, kann es in ihrer API brechen Veränderungen geben. Nicht empfohlen, in der Produktion zu verwenden.

Answer 3

Mein plumpen Versuch, die Antwort mit einer Symbolleiste mit Schublade Implementierung mit neuen Komponentennamen als Winkel-Material 5.0.2

zu tun zu ändern: Need CSS zu erhalten aller Header-Links behoben. Das Menüsymbol sollte transparent sein.

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>