Question

我正在关注this documentation，因为我想创建一个 Gmail类似于“搜索栏”，在输入旁边有一个下拉按钮，可打开带有过滤器选项的下拉菜单。

不幸的是，在文档中，示例未涵盖 input +下拉按钮的情况。

我从这里开始：

<!-- Search bar-->
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-outline-success" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
    </div>
  </div>
</div>

所有内容均正确显示，但下拉列表未正确显示。它在其父项（按钮）下打开，而我想在整个输入过程中使用它。可以肯定，可以通过一些CSS规则解决。

Answer 1

在Manual Triggers下的documentation中，您可以将下拉菜单附加到输入组，并通过点击事件上的附加按钮触发打开/关闭。

<!-- Search bar-->
<div class="container">
  <div class="input-group mb-3" #myDrop="ngbDropdown" ngbDropdown>
    <input type="text" class="form-control" >
    <div class="input-group-append"  role="group" >
    <button (click)="$event.stopPropagation(); myDrop.open();" class="btn btn-outline-success" >Hi</button>
  </div>
  <div class="dropdown-menu" ngbDropdownMenu>
     <button class="dropdown-item">One</button>
    <button class="dropdown-item">Two</button>
  </div>
 </div>
</div>

ngbootstrap：如何在搜索输入下放置下拉列表

1 个答案: