0

我的公司对 Nebular 非常陌生，我们有一个标准标题，其中包含一个用户下拉列表（引导程序），我想将其包含到 nb-layout-header 中。

这是否可能，如果可以，如何实现。以下是我们的代码片段：

主页：

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

上面的下拉菜单不会显示在布局标题中。任何帮助，将不胜感激..

谢谢你

4

1 回答 1

0

一些 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包以使 nebular 与引导程序一起工作。请参阅文档以获取指导。

顺便说一下，通常，Bootstrap 和 jQuery 不会直接用于 Angular 应用程序中。例如，有ng-bootstrap包。那么你就不需要 jQuery 和 Bootstrap js 文件了。

于 2019-01-23T11:40:25.403 回答