как показать полосу прокрутки под панелью инструментов Sidenav в AngularMaterial-7 - PullRequest
Новая
       14

как показать полосу прокрутки под панелью инструментов Sidenav в AngularMaterial-7

0 голосов
/ 29 ноября 2018

enter image description here Пожалуйста, помогите мне выполнить следующие два метода:

1) Как отобразить полосу прокрутки sidenav под панелью инструментов в sidenav:

2) Также как показывать полосу прокрутки только когда мы перемещаем курсор мыши по боковой панели.

Спасибозаранее.! 

<mat-sidenav-container fullscreen>
  <!-- SIDENAV -->
  <mat-sidenav [mode]="showLeftNAV ? 'side' : 'over'" [opened]="showLeftNAV" class="mat-elevation-z10" style="width:312px;border: 0px;">
    <!-- SIDENAV-HEADER-TOOLBAR -->
    <mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;">HELLO</mat-toolbar>
    <!--SIDENAV-BODY-CONTENT -->
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
    <h4 mat-line>SAMPLE TEXT</h4>
  </mat-sidenav>
  <!-- CONTENT -->
  <mat-sidenav-content>
    <!-- CONTENT-TOOLBAR -->
    <mat-toolbar color="primary" style="height:112px;position: sticky; top: 0; z-index: 10;">
      CONTENT-AREA
    </mat-toolbar>
  </mat-sidenav-content>
</mat-sidenav-container>

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

@G.Tranter Уважаемый сэр,

На самом деле, я использую Угловой материал- 7 , у меня по ошибке опубликовал его под Angular- 6 ,

Ваше решение сработало на Angular- 6 , но Не на Angular- 7 ,

После проверки я обнаружил, что Angular-7 дополнительно добавляет мат-ящик-внутренний-контейнер внутри Sidenav.

Аналогичный вопрос был поднят и по поводу mat-ящик-внутренний контейнер по ссылке ниже https://github.com/angular/material2/issues/13983

Итак, теперь в приложении .component.scss Я добавил приведенный ниже стиль, чтобы он работал. 

.mat-drawer-inner-container {
        display: flex;
        flex-direction: column;
      }
0 голосов
/ 30 ноября 2018

Вам нужно отключить прокрутку в sidenav и включить только прокручиваемый контент, который есть все, кроме панели инструментов (все ваши h4s).Для этого добавьте DIV вокруг прокручиваемого содержимого под панелью инструментов и примените стиль, чтобы зафиксировать высоту панели инструментов и позволить прокручиваемому разделу заполнить оставшееся пространство внутри flexbox. 

<mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
<div style="overflow-y: auto;">
  <!- menu content -->
</div>

Также добавьтенекоторый стиль для контейнера содержимого меню, чтобы отключить вертикальную прокрутку и обеспечить макет flexbox для содержимого меню.

.no-v-scroll {
  height: 100%;
  overflow-y: hidden; 
  display: flex; 
  flex-direction: column;
}

В Angular Material v6 вы можете применить этот стиль непосредственно к mat-sidenav: 

<mat-sidenav class="no-v-scroll" style="width: 320px;">
  <mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
  <div style="overflow-y: auto;">
    <!- menu content -->
  </div>
</mat-sidenav>

Но в v7 необходим дополнительный DIV для содержимого меню (панель инструментов плюс прокрутка): 

<mat-sidenav style="width: 320px;">
  <div class="no-v-scroll">
    <mat-toolbar style="flex: 0 0 128px;">HELLO</mat-toolbar>
    <div style="overflow-y: auto;">
      <!- menu content -->
    </div>
  </div>
</mat-sidenav>

Как уже упоминалось в ответе ОП, вы также можете переопределить класс mat-drawer-inner-container, если не хотите добавлять этот дополнительный DIV.

Вот модифицированный код ОПдля v6 в StackBlitz .

Вот модифицированный код ОП для v7 в StackBlitz .

...