Ngbootstrap：如何在搜索输入下定位下拉菜单

Question

我正在关注 this documentation 因为我想创建一个 Gmail like 'search bar' 在输入旁边有一个下拉按钮，可以打开带有过滤器选项的下拉菜单。

不幸的是，文档中的示例并未涵盖 input + dropdown 按钮场景。

我是这样开始的：

<!-- 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，您可以将下拉菜单附加到输入组，并在单击事件时使用附加按钮触发 open/close。

<!-- 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：如何在搜索输入下定位下拉菜单

Ngbootstrap: how to position dropdown under search input

css

bootstrap-4

ng-bootstrap

angular