Angular / Bootstrap - Navbar с переключаемой боковой панелью - PullRequest
Новая
       5

Angular / Bootstrap - Navbar с переключаемой боковой панелью

0 голосов
/ 13 февраля 2019

Я пытаюсь создать прогрессивное веб-приложение с Angular и Bootstrap.Самым сложным является внедрение навигационной панели, которая хорошо выглядит в Интернете и на мобильном устройстве.По большей части я до сих пор доволен своей реализацией.См. Ссылку на Stackblitz

Но Теперь я пытаюсь переключить навигационную панель как боковую панель, которая открывается справа налево.Кроме того, боковая панель должна сдвигать содержимое (Placeholder-Text) влево.Это может быть довольно сложно, потому что это может означать изменение некоторых классов Bootstrap.Может быть, у некоторых из вас есть решение для этого.В настоящее время моя навигационная панель переключает ссылки внизу.

html 

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="navbar-brand d-none d-md-block" href="javascript:void(0)">
        <img alt="logo" src="https://..." width="40px" height="auto">
        My Brand
      </a>
    </li>
  </ul>

  <ul class="navbar-nav mr-auto mr-md-3">
    <li class="nav-item">
      <a class="nav-link font-weight-bold" href="javascript:void(0)">Stories</a>
    </li>
  </ul>

    <ul class="navbar-nav mr-auto mr-md-3">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">
          <span>
            <img class="rounded" src="https://..." alt="user" width="35" height="35">
            <span class="d-none d-lg-inline">&nbsp; Tommy</span>
          </span>
        </a>
      </li>
    </ul>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">
          <div class="img-container" (click)="notificationsViewed = true">
            <img alt="notifications" src="https://..." width="35">
            <span [hidden]="notificationsViewed" class="badge badge-danger notifications-count">{{3}}</span>
          </div>
        </a>
      </li>
    </ul>

  <button class="navbar-toggler" (click)="toggleNavbar()" type="button" [attr.aria-expanded]="!isCollapsed">
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>
  </button>

  <div class="collapse navbar-collapse" [ngClass]="{ 'show': isCollapsed }">

    <ul class="navbar-nav float-right ml-auto">
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold"href="javascript:void(0)">Policy</a>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold" href="javascript:void(0)">Contact</a>
      </li>
      <li class="nav-item">
        <button (click)="logout()" class="btn btn-bd-logout">
          Logout
        </button>
      </li>
    </ul>

  </div>
</nav>

Машинопись 

  public isCollapsed: boolean = false;

  toggleNavbar() {
    this.isCollapsed = !this.isCollapsed;
  }

1 Ответ

0 голосов
/ 13 февраля 2019

Я не понял вторую часть боковая панель должна сдвинуть содержимое (Placeholder-Text) влево.

Но для первой части для боковой панели попробуйте использовать параметр навигации по угловым материалам:

Угловой материал Sidenav

...