angular - 如何在 Angular Nebular 主题中创建响应式 TopNav?
问题描述
我想使用 Angular Nebular 主题创建响应式顶部导航。我使用创建了顶部菜单
<nb-layout-header fixed>
<nb-actions class="left">
<nb-action class="profile" [nbContextMenu]="items"
nbContextMenuPlacement="bottom">Profile</nb-action>
<nb-action [routerLink]="['/login']">Login</nb-action>
<nb-action>menu 1</nb-action>
<nb-action>menu 2</nb-action>
<nb-action>secret menu</nb-action>
<nb-action *ngIf="local.retrieve('loggedIn')">secret menu2</nb-action>
</nb-actions>
</nb-layout-header>
但它在 PC 和移动设备中的布局相同。当用户在移动设备中浏览时,我如何使顶部导航栏成为“汉堡”菜单,如下面的参考
https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
解决方案
这是css和mediaQuery的问题。有几种方法,一个简单的,你定义了两个 .css 按钮响应和菜单响应
.button-responsive
{
display:none
}
@media (max-width: 573px)
{
.button-responsive
{
display:inline-block
}
.menu-responsive
{
display:none
}
}
然后你可以有一个 nb-actions 和一个 nbContextMenu
<nb-layout-header fixed>
<!--add class button-responsive to the button-->
<button nbButton ghost class="button-responsive" [nbContextMenu]="allitems">
<nb-icon icon="menu-outline"></nb-icon>
</button>
<!--add class menu-responsive to nb-actions-->
<nb-actions class="left menu-responsive">
<nb-action class="profile" [nbContextMenu]="items" nbContextMenuPlacement="bottom">Profile</nb-action>
<nb-action [routerLink]="['/login']">Login</nb-action>
<nb-action>menu 1</nb-action>
<nb-action>menu 2</nb-action>
<nb-action>secret menu</nb-action>
</nb-actions>
</nb-layout-header>
在组件的构造函数中使用固定的侧边栏更新相同的技术
constructor(public sidebarService: NbSidebarService) {}
我们的 .html 变得像
<nb-layout>
<nb-layout-header fixed>
<nb-icon class="button-responsive" icon="menu-outline" (click)="sidebarService.toggle()"></nb-icon>
<nb-actions class="left menu-responsive">
<nb-action class="profile" [nbContextMenu]="items" nbContextMenuPlacement="bottom">Profile</nb-action>
<nb-action [routerLink]="['/login']">Login</nb-action>
<nb-action>menu 1</nb-action>
<nb-action>menu 2</nb-action>
<nb-action>secret menu</nb-action>
</nb-actions>
</nb-layout-header>
<nb-sidebar #sidebar state="collapsed" class="button-responsive" fixed>
<nb-menu [items]="items"></nb-menu>
</nb-sidebar>
推荐阅读
- asp.net-core - Microsoft.AspNetCore.Mvc.Testing 和 Microsoft.AspNetCore.TestHost 包之间的差异
- mysql - MySQL函数,检索和操作日期时间
- json - 嵌套数组上的 Laravel AssertJsonCount
- r - 如何获得数据集中转发的前 10 条推文?
- python - ValueError:ModelForm 没有指定模型类
- excel - 使用spring boot将日期从excel文件插入mysql
- docker - 将日志从某个 Docker 容器输入到 Logstash 的最简单方法是什么?
- apache-spark - 如何通过 Spark SQL 连接 BigQuery?
- typescript - 是否可以在不创建新的 observable 的情况下合并到现有的 observable?
- r - 总结 R 中的 char 列