首页 文章

如何在角度6中的mat-nav-list中设置活动项目的颜色

提问于
浏览 次
0

我是角度6的新手，这里我有一个带mat-sidenav的mat-toolbar . 一切都运行良好，但我想为侧面导航菜单中的活动项目设置颜色 .

目前我有BLACK背景我想在mat-nav-list中选择项目时设置颜色，同时我也尝试在每个项目之间设置mat-divider也无效 .

app.component.html

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)" style="background:black"> //current background is black
    <mat-toolbar class="menuBar">Menus</mat-toolbar>
    <mat-nav-list>
      <a class="menuTextColor" mat-list-item href="#">Link 1</a> // want to change the color of the selected item.
      <a class="menuTextColor" mat-list-item href="#">Link 2</a> // want to set divider between each item
      <a class="menuTextColor" mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar class="toolbar">
      <button class="menuTextColor" type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="toolbarHeading">Demo App</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>

</mat-sidenav-container>

任何人都可以帮我解决这个问题 .

typescript angular-material angular-material-6

1 回答

  • 0

    如果您使用带有 routerLinkActive 属性的Angular Router，则可以执行此操作 .

    routerLinkActive 属性接受一个字符串，当 routerLink 为"active"时，该字符串将作为CSS类应用 .

    下面的代码展示了一个典型的用例：

    <mat-nav-list>
  <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">Home</a>
  <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">Settings</a>
  <a mat-list-item routerLink="/about" routerLinkActive="active-list-item">About</a>

    .active-list-item {
  color: #3F51B5 !important; /* Note: You could also use a custom theme */
}

    几个笔记：

    • 您可以将 active-list-item 更改为您想要应用的任何类名 .

    • 第二个代码段中的 !important 声明用作列表项样式优先于您的自定义样式 .

    这是Stackblitz .

    回复于

相关问题