Мы используем меню Bootstrap 4 для навигации по сайту. Мы хотели бы иметь возможность дополнительно использовать выпадающие списки ng-bootstrap.
Вы можете превратить DS в NGB с помощью их директивы:
<li class="nav-item" ngbDropdown>
<a class="nav-link" ngbDropdownToggle role="button" aria-haspopup="true" aria-expanded="false">Menu 2</a>
<div class="dropdown-menu ngbfade" aria-labelledby="navbarDropdownMenuLink" ngbDropdownMenu>
<a class="dropdown-item" routerLink="">Menu Item 1</a>
<a class="dropdown-item" routerLink="">Menu Item 2</a>
<a class="dropdown-item" routerLink="">Menu Item 3</a>
</div>
</li>
Однако с этой настройкой пользователи не могут ни вкладывать в меню, ни открывать его, ни вкладывать / стрелку в опции, как они могут в обычном меню Bootstrap.
Код на сайте ng-bootstrap выдает совершенно другой HTML, который больше напоминает раскрывающееся меню, чем меню ссылок:
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
Есть ли способ заставить версию директивы реагировать на табуляции?
Я попытался добавить href
, но, конечно, с Angular, который делает щелчок, вы попадете на домашнюю страницу приложения.