Nebular: Layout-Header, как добавить выпадающий список к компоненту - PullRequest
Новая
       6

Nebular: Layout-Header, как добавить выпадающий список к компоненту

0 голосов
/ 17 января 2019

Моя компания является новичком в Nebular, и у нас есть стандартный заголовок, который включает в себя выпадающий список пользователей (bootstrap), который я хотел бы включить в nb-layout-header.

Возможно ли это и если да, то как этого можно достичь. вот фрагменты нашего кода:

MainPage: 

<nb-layout center>  
  **<nb-layout-header fixed>
      <nb-header></nb-header>
  </nb-layout-header>**

  <nb-sidebar class="menu-sidebar"
              tag="menu-sidebar"
              responsive>
    <nb-sidebar-header>
      </i> Menu </span>-->
      <nb-menu [items]="sidebarHeaderMenu" (click)="toggleSideBar()"> </nb-menu>

    </nb-sidebar-header>
    <nb-menu [items]="subMenu"></nb-menu>
  </nb-sidebar>


  <nb-layout-column>

    <!--<router-outlet></router-outlet>-->
    <span style="width: 100vw">Place holder</span>

  </nb-layout-column>


  <nb-layout-footer>
  </nb-layout-footer>
</nb-layout>*

Код заголовка nb: 

<div class="header-container">
     <div class="logo-container">        
        <div class="logo" (click)="goToHome()">
          <img class="header-logo" src="../../assets/images/mylogo.png" alt="My LOGO">
        </div>
    </div>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Выпадающий список не отображает события в заголовке макета. Любая помощь будет оценена ..

Спасибо

1 Ответ

0 голосов
/ 23 января 2019

Для работы некоторых компонентов Bootstrap требуется использование JavaScript ( Документы Bootstrap ), поэтому убедитесь, что вы включили все необходимые файлы в angular.json. Это должно выглядеть примерно так: 

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
  ],

Кроме того, вам нужно добавить пакет @nebular/bootstrap, чтобы туманность работала с начальной загрузкой. См. документы для руководства.

И, кстати, обычно Bootstrap и jQuery не используются напрямую в приложениях Angular. Например, существует пакет ng-bootstrap . Тогда вам не нужны jS файлы jQuery и Bootstrap.

...