可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

由

翻译强力驱动

问题:

I'm trying to create a navigation bar using angular material 2 that collapses in small screens like mobile devices and tablets. I was only able to find md-button but not md-menu-bar as was in angular material

回答1:

Here is what I used to build my responsive nav-bar using Angular2+ Material 2 and flex-layout in angular-cli app.

(Please visit Install Angular Material and Angular CDK)

1) Install flex-layout

npm install @angular/flex-layout -save

2) Include flex-layout in your 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; }

Note: to test, resize your page.

take a look at flex-layout docs

回答2:

Have a look at angular2-material project on github. Here is a list of material design components they have published so far:

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

Also, I think either md-sidenav or md-toolbar is what you are looking for.

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

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

Note: The project is still in alpha release which means there can be breaking changes in their API. Not recommended to use in production.

回答3:

My crude attempt to modify the answer with a toolbar with drawer implementation with new component names as of angular-material 5.0.2

To do: Need to get CSS of all header links fixed. Menu icon should be transparent.

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>

回答4:

You can build a responsive menu by using mat-toolbar, mat-sidenav and flex-layout (fxFlexFill, ...).

See Stackblitz example.

More info...

回答5:

The simplest way to create a responsive navbar with Material is use the Angular 6 CLI.

Upgrade your Angular project to 6 or create a new project
ng add @angular/material
ng generate @angular/material:material-nav --name=my-nav

Then use the generated component <my-nav></my-nav>

You will notice the right had side (Application Title) is pushed down slightly

Fix this offset by installing normalize.css

npm i --save normalize.css
Import "node_modules/normalize.css/normalize.css" in your styles.css

回答6:

I have edited user2662006's answer with some fixes and code optimizations below. Note that my StackOverflow points are currently too low to even grant me the privilege to submit a comment let alone editing.

1) Install Angular Material and Angular CDK

2) Install flex-layout

npm install @angular/flex-layout -save

3) Include flex-layout in your app.module.ts

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

4) Import related material and flex modules

imports: [  ...,  FlexLayoutModule,  MatToolbarModule,  MatIconModule,  MatMenuModule,  MatButtonModule, ],

app.component.html

<mat-toolbar color="primary">     <button mat-button routerLink="/">         <mat-icon>home</mat-icon>          {{title}}     </button>      <span class="fill-remaining-space"></span>      <div fxLayout="row" fxHide 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" fxShow fxHide.gt-sm>      <mat-icon>menu</mat-icon>     </button>  </mat-toolbar> <mat-menu x-position="before" #menu>     <button mat-menu-item routerLink="/products">Products</button>     <button mat-menu-item routerLink="/dashboard">Dashboard</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; }

Notes:

resize your page to test responsive layout
take a look at the flex-layout API docs

回答7:

My presentation, Create Enterprise UIs That Your Users Will Love, covers some of these patterns for Angular Material. The links to the StackBlitz examples are in the speaker notes.

Responsive Button Bar with an Overflow menu: This could be placed in or under the TopNav. https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts

Dynamic Nested TopNav Menu: Note that this menu is not fully accessible. More work is needed to fully support a good a11y experience. https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app/app.component.ts

Dynamic Nested SideNav Menu: If you use the Transform Pattern to switch your TopNav to a SideNav on mobile, this shows how to build a dynamic SideNav menu. https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp.component.html

转载请标明出处:How to make a responsive nav-bar using angular material 2?

文章来源: How to make a responsive nav-bar using angular material 2?

标签

按钮

angular

toolbar