大佬教程收集整理的这篇文章主要介绍了angular – 在折叠时显示不同的导航栏项目(ngx-bootstrap),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我尝试通过制作崩溃的div和!崩溃来做到这一点.不幸的是,两者都表明!崩溃了.
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;
<!-- 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 queries(例如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'">
Stackblitz Fork上的示例
以上是大佬教程为你收集整理的angular – 在折叠时显示不同的导航栏项目(ngx-bootstrap)全部内容,希望文章能够帮你解决angular – 在折叠时显示不同的导航栏项目(ngx-bootstrap)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。