ng-bootstrap 中是否有选项可以在同一页面上实现下拉菜单和下拉菜单?
我已经尝试了 documentation 中给出的以下代码ng-bootstrap 的。但它是下拉菜单的全局配置。 我希望下拉菜单和下拉菜单位于同一页面。我正在使用 Angular 8。
import {Component} from '@angular/core';
import {NgbDropdownConfig} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-dropdown-config',
templateUrl: './dropdown-config.html',
providers: [NgbDropdownConfig] // add NgbDropdownConfig to the component providers
})
export class NgbdDropdownConfig {
constructor(config: NgbDropdownConfig) {
// customize default values of dropdowns used by this component tree
config.placement = 'top-left';
config.autoClose = false;
}
}
<div ngbDropdown>
<button class="btn btn-secondary" type="button" id="dropDownMenuButton" ngbDropdownToggle>
Dropup Menu
</button>
<div class="dropdown-menu tx-13" ngbDropdownMenu 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>
<div class="dropup" ngbDropdown>
<button class="btn btn-secondary" type="button" id="dropupMenuButton" ngbDropdownToggle>
Dropup Menu
</button>
<div class="dropdown-menu tx-13" ngbDropdownMenu aria-labelledby="dropupMenuButton">
<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>
最佳答案
看看API 。
您还可以直接将展示位置设置为 NgbDropdown
指令,如下所示
<div class="dropup" ngbDropdown placement="top-left">
...
</div>
这是一个 nice guide对于NgBootstrap定位,您可以找到更多示例。
关于javascript - ng-bootstrap 下拉菜单和下拉菜单放置在同一页面中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59317183/