web-dev-qa-db-fra.com

Comment créer une barre de navigation réactive utilisant Angular Material 2?

J'essaie de créer une barre de navigation à l'aide de matériau angulaire 2 qui s'effondre sur de petits écrans tels que les appareils mobiles et les tablettes.

Je n'ai pu que trouver md-button mais non md-menu-bar _ as in Angular).

angularangular-material2
32
kero

Voici ce que j’ai utilisé pour construire mon responsive nav-bar en utilisant Angular2 + Material 2 et flex-layout dans angular-cli _ app.

(Veuillez visiter Installer Angular Matériel et Angular CDK) )

1) Installer flex-layout

npm install @angular/flex-layout -save

2) Incluez flex-layout dans votre app.module.ts

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

3) importer

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

Remarque: pour tester, redimensionnez votre page.

jetez un oeil à flex-layout docs

47
user2662006

Le manière la plus simple pour créer une barre de navigation réactive avec l'option Matériau utilisé avec Angular 6 CLI schémas .

(Si vous obtenez 'Collection "@ angular/material" ne peut pas être résolu' lorsque vous exécutez ng add @ angular/material, voir this )

Puis utilisez le composant généré <app-my-nav></app-my-nav> Ajouter la balise ci-dessus à votre composant principal

Vue réactive sur un ordinateur de bureau: Responsive view on Desktop PC

Menu effondré réactif à basse résolution: Responsive collapsed menu with low resolution

Cela a été vu à l'origine sur blog de Angular .

13
rjdkolb

Voici ma façon préférée de créer une barre de navigation réactive dans Angular. Si vous utilisez Angular 6, assurez-vous d’utiliser une version 6.1+
Exemple de travail sur Stackblitz: https://stackblitz.com/edit/angular-v6xwte

Exemple sur un écran plus petit: Toolbar on a small screen

Exemple sur un écran plus grand: Toolbar on a large screen

Voici les étapes précises à suivre:

1) Installez les paquets nécessaires. Tapez votre terminal:

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2) Importez les modules nécessaires dans votre app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';

N'oubliez pas d'ajouter ces modules au tableau imports ci-dessous.

3) Ajouter des icônes de matériaux de lien à votre index.html
Le lien doit aller avant tout contenu Angular.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4) Dans votre styles.css, ajoutez un thème Angular et définissez les marges sur 0%

@import "~@angular/material/prebuilt-themes/Indigo-pink.css";
body{
    margin: 0%;
}

5) Ajouter du code HTML de barre d’outils dans votre app.component.html

<div style="height: 100vh;"> 
<mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about-us">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about-us">About us</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

6) Donnez un style à la barre d’outils dans votre app.component.css

.companyName{
    font-size: 150%;
}
div {
    overflow: inherit;
}
a{
    text-decoration: none;
    font-size: 110%;
    white-space: normal;
}
button{
    font-size: 110%;
    min-width: min-content;
}
.example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }
  .mat-sidenav-content{
      font-size: 200%;
      text-align: center;
  }
11
Tomasz Chudzik

Ma tentative brutale de modifier la réponse avec une barre d’outils avec une implémentation de tiroir avec de nouveaux noms de composant à partir de angular-material 5.0.2

À faire: Nécessité de corriger les CSS de tous les liens d’en-tête. L'icône du menu doit être transparente.

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
Anup

Regardez le projet angular2-material Sur github. Voici une liste des composants de conception de matériaux publiés jusqu'à présent:

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

De plus, je pense que vous cherchez soit md-sidenav Ou md-toolbar.

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

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

Remarque: Le projet est toujours en version alpha, ce qui signifie que des modifications radicales peuvent être apportées à leur API. Non recommandé d'utiliser en production.

4
Cerny

Ma présentation, Créer des interfaces utilisateur d'entreprise que vos utilisateurs aimeront , couvre certains de ces modèles pour Angular. Les liens vers les exemples de StackBlitz figurent dans les notes du présentateur.

Barre de boutons réactif avec un menu Débordement: elle peut être placée dans ou sous le TopNav. https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts

Menu dynamique TopNav imbriqué: Notez que ce menu n'est pas entièrement accessible. Plus de travail est nécessaire pour soutenir pleinement une bonne expérience. https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app/app.component.ts

Menu SideNav imbriqué dynamique: si vous utilisez le motif de transformation pour basculer votre TopNav en un SideNav sur un mobile, cela montre comment créer un menu SideNav dynamique. https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp.component.html

2
Splaktar

Vous pouvez créer un menu responsive en utilisant mat-toolbar, mat-sidenav et flex-layout _ (fxFlexFill, ...).

Voir exemple Stackblitz .

Plus d'infos ...

2
danger89

J'ai modifié la réponse de user2662006 avec quelques corrections et optimisations de code ci-dessous. Notez que mes points StackOverflow sont actuellement trop bas pour me donner même le privilège de soumettre un commentaire, encore moins de le modifier.

1) Installer Angular Matériel et Angular CDK)

2) Installer flex-layout

npm install @angular/flex-layout -save

3) Incluez flex-layout dans votre app.module.ts

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

4) Matériel lié à l'importation et modules flexibles

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

Remarques:

2
Cengiz