web-dev-qa-db-ja.com

angular 6のmat-nav-listでアクティブなアイテムの色を設定する方法

angular 6は初めてですが、ここにはmat-sidenav付きのmat-toolbarがあります。すべて正常に機能していますが、sidenavメニューでアクティブなアイテムの色を設定したいと思います。

現在、背景が黒です。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>

誰かが私がこれを修正するのを手伝ってもらえますか？.

typescriptangular-materialangular-material-6
2
Zhu

これは、Angular Router with routerLinkActiveプロパティを使用している場合に実行できます。

routerLinkActiveプロパティは、routerLinkが「アクティブ」であるときに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 2番目のコードスニペットの宣言は、リストアイテムのスタイルがカスタムスタイルよりも優先されるために使用されます。

これが Stackblitz です。

2
Edric

私がこれに遅すぎないことを願っています。 mat-nav-listとmat-menuでも同じ問題が発生したので、数行のcssで希望どおりに機能させることができました。試してみて、ニーズに合うかどうかを確認してください。以下のscssをご覧ください。

[class^='mat-list-'] {
  &:hover:active {
    background: rgba(255, 255, 255, 0.04);
  }
  &:focus,
  .mat-list-text {
    background: none !important;
  }
}

[mat-menu-item].is-active,
[mat-list-item].is-active {
  background: hsla(0, 0%, 100%, 0.1) !important;
}

今、私はカスタムダークテーマを持っているので、あなたはあなたの選択の後に色を設定したいかもしれません。 routerLinkActive="is-active"を追加するだけで、準備が整います。

/宜しくお願いします

0
Boris Pancisek