Суб-навигация Clarity UI

Я использую приведенный ниже код для суб-навигации в app.component.html, однако после выбора subnav, которая переходит на следующую страницу, выделенный фрагмент не остается выделенным, только домашняя ВКЛАДКА. Что мне не хватает?

> <nav class="subnav">

  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="/home">Home</a>
    <li class="nav-item">
      <a class="nav-link" href="/dashboards">Dashboards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/tools">Tools</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/faqs">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

vmware-clarity
person Mooihoek    schedule 04.06.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

если вы используете маршрутизатор Angular, вам нужно поставить

routerLinkActive="active"

в каждой ссылке

Проверьте здесь

person Massimo Costa    schedule 04.06.2018
comment
спасибо, но это для вертикальной навигации, я использую subnav, см. здесь внизу страницы, routerLinkActive не упоминается. vmware.github.io/clarity/documentation/v0.11/header# примеры - person Mooihoek; 05.06.2018
comment
ну, routerLinkActive действует везде, где вы используете Angular Router Links - person Massimo Costa; 06.06.2018

arrow_upward
2
arrow_downward

Класс active, который в вашем примере жестко запрограммирован так, чтобы он был только по ссылке Home. Поскольку это Angular, вам следует адаптировать теги привязки, как и для любых ссылок Angular. Это должно быть примерно так, если вы используете Angular с subnav.

<nav class="subnav">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" routerLink="/home" routerLinkActive="active">Home</a>
    <li class="nav-item">
      <a class="nav-link" routerLink="/dashboards" routerLinkActive="active">Dashboards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/tools" routerLinkActive="active">Tools</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/faqs" routerLinkActive="active">FAQs</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="/about" routerLinkActive="active">About</a>
    </li>
  </ul>
</nav>
person Jeremy Wilken    schedule 05.06.2018
comment
Пятно на Джереми, спасибо, синтаксис был немного некорректен! - person Mooihoek; 05.06.2018