[英]How to create responsive TopNav in Angular Nebular theme?
我想使用 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 和 menu-responsive
.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.