Как создать адаптивный TopNav в теме Angular Nebular? - PullRequest
Новая
       62

Как создать адаптивный TopNav в теме Angular Nebular?

1 голос
/ 28 мая 2020

Я хочу создать адаптивную верхнюю навигацию, используя тему 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>

. Но это тот же макет как в P C, так и в мобильном телефоне. Как сделать так, чтобы верхняя панель навигации стала меню «гамбургер», когда пользователь просматривает на мобильном устройстве, как показано ниже

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

1 Ответ

1 голос
/ 28 мая 2020

это проблема 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>
...