как изменить размер фиксированного заголовка - PullRequest
Новая
       35

как изменить размер фиксированного заголовка

0 голосов
/ 12 декабря 2018

это часть моего проекта: app

Я хочу, чтобы при прокрутке был исправлен заголовок, и я добавил класс начальной загрузки fixed-top в свой заголовок в файле header.component.html.,но когда я изменяю режим моего sidenav на side, заголовок не меняется и толкается влево.как я могу решить эту проблему?

1 Ответ

0 голосов
/ 12 декабря 2018

Вам не нужно использовать загрузчик fixed-top - вам просто нужно разместить заголовок в нужном месте.Для вашего «бокового» режима заголовок должен находиться внутри содержимого sidenav, чтобы он передавался вместе с содержимым.Для режима «over» заголовок должен находиться над и вне sidenav.Вы можете сделать это, используя логику шаблона: 

<ng-container *ngIf="!pushed" [ngTemplateOutlet]="appHeader"></ng-container>

<mat-sidenav-container class="theme-sidenav-container" autosize>

    <mat-sidenav class="theme-sidenav" #sidenav [mode]="mode" position="end" opened="false" (mouseleave)="pushed? 2+2 :sidenav.toggle()">
        ...
    </mat-sidenav>

    <mat-sidenav-content class="theme-main-content">

        <ng-container *ngIf="pushed" [ngTemplateOutlet]="appHeader"></ng-container>

        <router-outlet></router-outlet>

    </mat-sidenav-content>

</mat-sidenav-container>

<ng-template #appHeader>
  <app-header (toggleSidenav)="sidenav.toggle()" [menuAvailable]="pushed"></app-header>
</ng-template>

Здесь он находится на StackBlitz .Обратите внимание, что я также удалил класс fixed-top и определил значения по умолчанию для mode и pushed.

Это может быть не совсем то, что вы хотите, но показывает, как динамически изменять позицию заголовка.Возможно, вам потребуется добавить макет в app-sidenav и класс theme-main-content.

...