Как установить цвет активного элемента в mat-nav-list в angular 6 - PullRequest
Новая
       5

Как установить цвет активного элемента в mat-nav-list в angular 6

0 голосов
/ 01 октября 2018

Я новичок в angular 6, здесь у меня есть панель инструментов mat с mat-sidenav. Все работает хорошо, но я хочу установить цвет для активного элемента в боковом меню навигации.

в настоящее время яУ меня есть ЧЕРНЫЙ фон. Я хочу установить цвет при выборе элемента в списке mat-nav, а также попытался установить разделитель матов между каждым элементом, который также не работает.

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>

Может кто-нибудь помочь мне исправить это.

1 Ответ

0 голосов
/ 02 октября 2018

Это можно сделать, если вы используете Angular Router со свойством routerLinkActive.

Свойство routerLinkActive принимает строку, которая будет применяться в качестве класса CSS, когда routerLink равен "active ".

Приведенный ниже код демонстрирует типичный пример использования: 

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

...