Création d'une barre d'outils réactive à l'aide de Angular 2 Matériel

Question

J'ai créé une barre d'outils en utilisant Angular 2 Material. Mais elle n'est pas reposnsive, comment pouvons-nous ajouter une nature réactive à Angular 2 Toolbar.

Ma barre d'outils

<md-toolbar color = "primary"> 
    <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button> 
    <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button> 
    <md-menu #bMenu="mdMenu"> 
     <button md-menu-item [routerLink]="['/a4']">Angular Component</button> 
     <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button> 
     <button md-menu-item [routerLink]="['/inout']">Event Emitters</button> 
     <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button> 
     <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button> 
     <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button> 
     <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button> 
     <button md-menu-item [routerLink]="['/viewchild']">View Child</button> 
     <button md-menu-item [routerLink]="['/view']">View Encapsulation</button> 
    </md-menu> 

    <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button> 
    <md-menu #aMenu="mdMenu"> 
     <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button> 
     <button md-menu-item [routerLink]="['/guard']">Angular Guards</button> 
     <button md-menu-item [routerLink]="['/host']">Host & Host-Context</button> 
    </md-menu> 

    <button md-button (click)="openDialog()">&nbsp;Contact Card</button> 
    </md-toolbar> 

Answer 1

Problème

Vous avez besoin d'un moyen de rendre votre barre de navigation réactive.

Solution

Vous pouvez facilement envelopper dans bootstrap from twitter

Exemple

Bootstrap sort de la boîte réactive. Il est facile d'utiliser un facile à apprendre. Voici un exemple de création d'une ligne réactive dans votre page Web à l'aide d'une grille.

<div class="row"> 
    <div class="col-sm-4>.col-sm-4</div> 
    <div class="col-sm-4>.col-sm-4</div> 
    <div class="col-sm-4">.col-sm-4</div> 
</div> 

Fondamentalement, chaque annonce de ligne jusqu'à 12. Vous pouvez faire sm md et des boîtes de lg en les ajoutant à 12. Donc, si vous vouliez 2 boîtes vous feriez number 6

<div class="row"> 
     <div class="col-lg-6>.col-lg-6</div> 
     <div class="col-lg-6>.col-lg-6</div> 
    </div> 

Et voici un exemple de navigation à partir des docs.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
    <a class="navbar-brand" href="#">Hidden brand</a> 
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 

Vous pouvez utiliser et bootstrap puis ajouter vos liens dans le code HTML. Ce sera réactif. Vous devrez prendre le temps d'apprendre comment cela fonctionne. Mais une fois que vous le faites, cela sera plus facile pour vous dans le futur et vous n'aurez jamais à demander comment rendre quelque chose de nouveau.

Answer 2

Utilisez angular/flex-layout pour la réactivité.

• flex-layout wiki
• flex-layout Demo

Answer 3

Mon brut tentative de mise en œuvre avec de mise en page flexible et matériau angulaire 5.0.2

.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>