Как динамически установить ширину основного контента в зависимости от того, открыта или закрыта навигационная сторона погоды в материале Angular - PullRequest
0 голосов
/ 07 февраля 2020

Я новичок в angular и материальных рамках. Я пытаюсь создать страницу, которая имеет структуру ниже enter image description here

Кнопка на правой стороне портала администратора работает отлично, она скрывается и показывает боковое меню. Большая часть кода является кодом по умолчанию, сгенерированным angular.

Чтобы сдвинуть левое меню под верхней панелью навигации, я использовал [fixedTopGap] = "64" на mat-sidenav. Чтобы развернуть верхнее меню на полную ширину, я использовал главную верхнюю панель класса в нижней строке: -

<mat-sidenav-content class="mainTopBar">

Css для главной верхней панели: -

.mainTopBar
{
margin-left:0px !important;
}

Это дало мне полное верхнее меню, но теперь проблема в том, какой контент, который я пытаюсь разместить, используя контент ng, застревает слева. Как я могу предоставить поле для содержания ng, основываясь на том, открыто ли левое меню или нет.

Вот мой код html: -

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)" [fixedTopGap]="64">
    <mat-toolbar class="Namebar">Menu</mat-toolbar>
    <mat-nav-list >
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="mainTopBar">
      <mat-toolbar color="primary">

        <button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          *ngIf="isHandset$ | async">
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
        <span>Admin Portal</span>
        <button
          type="button"

          style="position:absolute;margin-left:200px;"
          aria-label="Toggle sidenav"
          mat-icon-button
          *ngIf="!(isHandset$ | async)"
          (click)="drawer.toggle()"
         >
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
      </mat-toolbar>
     <ng-content style="margin-left: 200px !important; "></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

Я пытался использовать поле margin-left: 200px но даже это не сработало. На боковой панели откройте его следующим образом: - enter image description here

Исходя из ответа Инь, экран, который я получаю: - enter image description here

Ответы [ 2 ]

0 голосов
/ 12 февраля 2020

Наконец я нашел проблему. Я сделал верхнюю панель навигации (мат-панель инструментов) фиксированной и шириной до 100vw. Здесь добавлен автоматический размер <mat-sidenav-container class="sidenav-container" autosize >

И он начал работать как положено

0 голосов
/ 07 февраля 2020

Не используйте margin-left, просто добавьте autosize в mat-sidenav-container:

<mat-sidenav-container class="sidenav-container" autosize >...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...