Question

我的公司对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>

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

谢谢

Answer 1

某些Bootstrap组件需要使用JavaScript才能起作用（Bootstrap docs），因此请确保在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程序包以使引导程序能够进行星状工作。有关指导，请参见docs。

顺便说一句，通常，在Angular应用程序中不直接使用Bootstrap和jQuery。例如，有ng-bootstrap包。然后，您不需要jQuery和Bootstrap js文件。

Nebular：Layout-Header如何向组件添加引导程序下拉列表

1 个答案: