Mat-Nav-List是水平的还是垂直的? [英] Mat-Nav-List horizontal instead of vertical?

问题描述

如何使以下水平显示(而不是垂直显示)成为默认设置?它位于通过Angular-CLI 1.7.2生成的Angular 5.2.7应用程序中的navigation.component.html中.注释中包含的文档链接没有讨论如何水平布置材质"导航栏.

How do I make the following horizontal instead of the (apparent default) of vertical? It is located within navigation.component.html within my Angular 5.2.7 application that was generated via Angular-CLI 1.7.2. The documentation link included in the comment does not discuss how to layout a Material navigation bar horizontally.

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

推荐答案

我能够通过使用一些自定义的scss创建水平mat-nav-list.我使用类list-horizontal附加它.

I was able to create a horizontal mat-nav-list by using some custom scss. I attach it using the class list-horizontal.

<mat-nav-list class="list-horizontal">
  ...
</mat-nav-list>

这是我用于list-horizontal的scs:

mat-nav-list.list-horizontal {
  padding: 0;
  .mat-list-item {
    display: inline-block;
    height: auto;
    width: auto;
  }
}

这里有一个Stackblitz 展示了它与Angular Material 7一起使用.

Here's a Stackblitz to show it working with Angular Material 7.

这篇关于Mat-Nav-List是水平的还是垂直的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！