Угловой материал боковой панели с боковым режимом "половина"

Question

Я работаю над динамической боковой панелью для нашего проекта, в основном мы хотим установить динамическую боковую панель, когда пользователь нажимает на боковую панель, она будет распространяться, когда пользователь нажимает на боковую панель, когда она щелкает, и отображаются только значки (но не полностью свернуть, он сохранит значки), например, до того, как пользователь щелкнет значок. Мы используем sidenav.toggle() из функции углового материала, которая в основном полностью закрывает боковую панель, и если я не использую функцию toggle (), то режим "Side" для navbar не работает. Поэтому я хочу свернуть значок с боковым режимом. (Другая причина, по которой нам нужно сохранить боковой режим, заключается в том, что мы также должны убедиться, что когда пользователь раскрывает боковую панель, правый контент должен сдвигаться вправо)

После того, как пользователь нажмет на иконку

Есть способ сделать это?

Благодарю.

Answer 1

Чтобы реализовать это, вам просто нужно сослаться на эти две ссылки:

• Изменение размеров Sidenav | Угловой материал
• Список навигации | Угловой материал

взгляните на следующий код. Реализация будет примерно такой:

<mat-drawer-container class="example-container mat-typography" autosize>
  <mat-drawer #drawer mode="side" disableClose="true" opened="true">
    <button mat-mini-fab (click)="isExpanded = !isExpanded" color="warn" style="margin: 10px;">
      <mat-icon aria-label="Menu">menu</mat-icon>
    </button>

    <mat-nav-list>
      <mat-list-item>
        <mat-icon mat-list-icon>person</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management A</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>assignment</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management B</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>domain</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management C</h4>
      </mat-list-item>
      <mat-list-item>
        <mat-icon mat-list-icon>folder_shared</mat-icon>
        <h4 mat-line *ngIf="isExpanded">Management X</h4>
      </mat-list-item>
    </mat-nav-list>
  </mat-drawer>

  <div class="example-sidenav-content">
    You cards and screen Contents goes here..
    Will be pushed towards right on expanding side navbar.
  </div>
</mat-drawer-container>

Answer 2

Я сделал это с помощью CSS

    mat-sidenav:not(.mat-drawer-opened) {
    transform: translate3d(0, 0, 0) !important;
    visibility: visible !important;
    width: 60px !important;
    overflow: hidden;
  }

Поэтому, когда рисование НЕ открыто, ширина боковой панели составляет 60 пикселей, а не 0. Этого достаточно, чтобы отобразить ваши значки.

Хорошо, следующая проблема заключается в том, что вам нужно скрыть кучу вещей, таких как имя кнопки и другие описательные вещи, для меня мне нужно изменить высоту изображения профиля и скрыть дополнительный текст. Я сделал это так же, как и выше, с помощью селектора: not:

  mat-sidenav:not(.mat-drawer-opened) div.leftNav div.navProfile img {
    width: 40px; margin: 16px 0 0px 0;
  }
  mat-sidenav:not(.mat-drawer-opened) .navTitle,
  mat-sidenav:not(.mat-drawer-opened) .profileTitle {
    display: none;
  }

Когда я свернул, я не хотел показывать названия кнопок, поэтому я заключил имя в *ngIf

 <span class="navName" *ngIf="opened">{{ page?.name }} </span>

Это должно работать, и это так, но есть проблема. NgIf привязан к открытому событию, и вы заметите задержку, когда событие запускается (чтобы учесть его анимацию), чтобы показать ваши ярлыки, когда ящик открыт.

Чтобы исправить это, мне пришлось вникнуть в api sidenav и найти вызовы eventemitter openStart и closedStart. Я создал новый bool в классе компонентов,

showNavLabels: boolean;

затем привяжите события к этому bool в HTML.

  <mat-sidenav class="sidenav" #sidenav mode="side" [(opened)]="opened"
      (openedStart)='showNavLabels = !showNavLabels'
      (closedStart)='showNavLabels = !showNavLabels' >

Я уверен, что есть способ получше, так как я еще не очень разбираюсь в Angular.

Надеюсь, это вам поможет.

Answer 3

Я создал пример на основе scss. Может кто поможет сделать мобильную версию по этому образцу.

• Шаг 1: Добавьте ниже стиль кstyles.scss

      // src/styles.scss
:root {
  --menu-width-open: 200px;
  --menu-width-closed: 64px;
}

.mat-drawer-container {
  .mat-drawer {
    box-sizing: content-box;
    width: var(--menu-width-open);
    transition: all 0.3s ease-in-out !important;
  }

  .mat-drawer-content {
    // transform: translateX(200px);
    margin-left: var(--menu-width-open) !important;
    transition: all 0.3s ease-in-out !important;
  }

  &.container-closed {
    .mat-drawer {
      width: var(--menu-width-closed);
    }

    .mat-drawer-content {
      // transform: translateX(64px) !important;
      margin-left: var(--menu-width-closed) !important;
    }
  }
}

• Шаг 2: Добавьте ящик вapp.componenet.html

      <mat-drawer-container class="example-container" autosize [ngClass]="{ 'container-closed': !showFiller }">
  <mat-drawer #drawer class="example-sidenav" mode="side" disableClose="true" opened="true">
    <button (click)="showFiller = !showFiller" mat-raised-button>click</button>
  </mat-drawer>
  <div class="example-sidenav-content">
    <router-outlet></router-outlet>
    <button type="button" mat-button (click)="drawer.toggle()">Toggle sidenav</button>
  </div>
</mat-drawer-container>

• Шаг 3: И добавьтеshowFiller = false;кapp.component.tsфайл.

      // app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  showFiller = false;
}

Answer 4

Для этого https://github.com/angular/material2/issues/1728 имеется запрос на добавление функций.

если вы прочтете комментарии, вы также найдете несколько примеров того, как реализовать их самостоятельно, пока они официально не доступны.