Navbar响应Angular 5

时间:2017-12-14 03:20:18

标签: angular

我正在寻找参考或某种方式在Angular 5中制作响应式 Navbar ,如果有必要使用 Bootstrap ,这是最好的方法或者有任何选择不要使用Bootstrap。

附图示例:

enter image description here

现在我正在使用标签,但如果有必要,我愿意改变:

<mat-toolbar role="heading" aria-label="navigation">

  <mat-toolbar-row>
    <h1 class="mat-display-1">{{ title }}</h1>
    <span class="fill-remaining-space"></span>
    <nav mat-tab-nav-bar>
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
            {{link.label}}
        </a>
    </nav>
    <!-- Mobile Button Nav -->
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="fa fa-bars fa-lg"></span>
    </button>

    <span class="fill-remaining-space"></span>
  </mat-toolbar-row>
</mat-toolbar>

1 个答案:

答案 0 :(得分:1)

您可以使用Angular Material中的工具栏,该工具栏包含工具栏组件(https://material.angular.io/components/toolbar/overview

要使您的网站(包括工具栏)响应,请使用Flex布局库https://github.com/angular/flex-layout/wiki