web-dev-qa-db-fra.com

Mat-Nav-List horizontal au lieu de vertical?

Comment est-ce que je fais l'horizontale suivante au lieu de la (valeur apparente par défaut) de la verticale? Il se trouve dans navigation.component.html dans mon Angular 5.2.7 application générée via Angular-CLI 1.7.2. Le lien de documentation inclus dans le commentaire n'indique pas comment mettre en forme une barre de navigation de matériau horizontalement.

<mat-nav-list>
  <!--https://material.angular.io/components/list/overview-->
  <mat-list-item>
    <a [routerLink]="['/home']">Home</a>
  </mat-list-item>
  <mat-list-item>
    <a [routerLink]="['/about']">About</a>
  </mat-list-item>
  <mat-list-item>
    <a [routerLink]="['/contact']">Contact Us</a>
  </mat-list-item>
</mat-nav-list>

angularangular-material
4
user3785010

vous devez faire flotter chaque élément de la liste

dans le fichier css mis: 

.mat-list-item {
  float: right;
}

dans le fichier html mettez votre code: 

<mat-nav-list>
    <!--https://material.angular.io/components/list/overview-->
    <mat-list-item>
        <a [routerLink]="['/home']">Home</a>
    </mat-list-item>
    <mat-list-item>
        <a [routerLink]="['/about']">About</a>
    </mat-list-item>
    <mat-list-item>
        <a [routerLink]="['/contact']">Contact Us</a>
    </mat-list-item>
</mat-nav-list>
4
Nullpointer13

J'ai fini par utiliser mat-tab-nav-bar, car rien d'autre dans Angular le matériau semble prendre en charge les barres de navigation horizontales, justifiées à gauche, Angular 6, au moins à partir de mi-août 2018.

Un exemple complet Angular 6.x peut être trouvé dans le Angular exemple de barre de navigation horizontale Matériau I assemblé à l'aide de Angular-CLI 6.x, Angular 6.x et Angular Matériau 6.x.

1
user3785010

Définissezmat-nav-listpour assouplir un conteneur, puis ajustezmat-list-itemheight et padding

J'utilise angular/flex-layout mais vous pouvez réaliser la même chose avec css/scss

<mat-nav-list fxLayout>
<mat-list-item fxFlex>
    <a [routerLink]="['/home']">Home</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/about']">About</a>
</mat-list-item>
<mat-list-item fxFlex>
    <a [routerLink]="['/contact']">Contact Us</a>
</mat-list-item> </mat-nav-list>
0
jspassov

Voici ce que j'ai fait pour gérer ce problème de barre de navigation horizontale:

<mat-nav-list class="lists_class">
 <a routerLink="link" mat-list-item matLine class="link_class">name</a>
<mat-nav-list>

.lists_class {
    width: 100%;
}
.link_class {
    display: inline;
    float: left;
    width: min-content;
}

La clé pour moi était d'ajuster la largeur. J'espère que cela fonctionne/aide, à la vôtre!

0
Aaron Williams