angular - 在折叠时显示不同的导航栏项目(ngx-bootstrap)
问题描述
使用 ngx-bootstrap,是否可以根据导航栏是否折叠显示不同的导航栏引导项?
我试图通过为折叠和折叠创建一个 div 来做到这一点。不幸的是,两者都在 !collapsed 时显示。
StackBlitz:https ://stackblitz.com/edit/angular-startup-proj-ddztm4
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand"
href="#">Navbar</a>
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target=".navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-label="Toggle navigation"
[attr.aria-expanded]="!isCollapsed"
(click)="isCollapsed = !isCollapsed">
<span class="navbar-toggler-icon"></span>
</button>
<!-- show only when not collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'hide': isCollapsed}">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Link One - full screen</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link Two - full screen</a>
</li>
</ul>
</div>
<!-- show only when collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'show': !isCollapsed}">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
href="#">Link Two - collapsed</a>
</li>
<li class="nav-item">
<a class="nav-link text-success"
href="#">Link Three - collapsed</a>
</li>
</ul>
</div>
</nav>
TS:
isCollapsed = true;
解决方案
如果您添加[style.display]="isCollapsed?'inherit':'none'"
到<ul class="navbar-nav mr-auto"
:
<!-- show only when not collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'hide': isCollapsed}">
<ul class="navbar-nav mr-auto">
<!-- rest of code .... -->
</div>
<!-- show only when collapsed -->
<div class="collapse navbar-collapse navbarSupportedContent"
[ngClass]="{'show': !isCollapsed}">
<ul class="navbar-nav mr-auto" [style.display]="isCollapsed?'inherit':'none'">
<!-- rest of code .... -->
</div>
更新:
为了使其具有响应性,您可以使用@media 查询(例如w3school中的示例):
@media (max-width: 576px){
ul.collapse{
display:none !important;
}
}
@media (min-width: 576px){
ul.full{
display:none !important;
}
}
css
然后添加以下类ul
:
<!-- show only when not collapsed -->
`<ul class="navbar-nav mr-auto collapse">`
<!-- show only when collapsed -->
<ul class="navbar-nav mr-auto full" [style.display]="isCollapsed?'inherit':'none'">
推荐阅读
- compilation - 如何在指针中处理 8051 XDATA 内存空间?
- php - 不同的行背景颜色取决于 MySQL 数据
- php - 将文件上传到几个级别的文件夹 - PHP
- android - 抛出异常时Android CoroutineWorker重试
- javascript - 带有 ReactJS 的 Ace 编辑器 - 撤消功能
- angularjs - onChanges 不适用于组件绑定
- android - 与 ROOM 数据库的事务
- asp.net - asp.net MVC 应用程序中的更新数据库问题
- python - 从空数据框中删除列标签
- python - python 请求的 HTML(和 urllib)没有提供与原始 HTML 相同的 HTML