Лучший способ управлять высотой угловых компонентов для размещения на экране - PullRequest
Новая
       53

Лучший способ управлять высотой угловых компонентов для размещения на экране

2 голосов
/ 15 октября 2019

У меня проблемы с высотой моих компонентов ... У меня есть mat-toolbar в компоненте с именем app-navbar, и у меня есть другой компонент с именем app-sidebar с mat-nav-list (который является боковой левой панелью)меню)

У меня есть третий компонент, который объединяет оба, но это происходит:

enter image description here

Последний элемент nav-list Я хочу, чтобы он был внизу страницы, но при условии, что компонент mat-sidenav-container имеет высоту 100%, он «уходит» со страницы, даже если содержимое страницы не имеет прокрутки. Я могу сделать это правильно, установив его высоту как: height: calc(100% - 64px), которая 64px является высотой панели инструментов материала (по умолчанию). Я не думаю, что это правильное решение, потому что, если материал когда-нибудь решит изменить размер высоты, у меня будут проблемы.

Есть ли способ использовать flex или подобное, чтобы сделать его лучше?

HTML: 

<div>
  <app-navbar [mySideBar]="snav" fxFlex></app-navbar>
</div>
  <mat-sidenav-container>
    <mat-sidenav autoFocus="false"
                  #snav mode="side"
                  fixedInViewPort="true"
                  [mode]="side"
                  [opened]="true">
      <app-sidebar [mySideBar]="snav"></app-sidebar>
    </mat-sidenav>
    <mat-sidenav-content fxLayout="column">
      <!-- content -->
    </mat-sidenav-content>
  </mat-sidenav-container>

CSS: 

mat-sidenav-container {
  height: calc(100% - 64px);
}

Или, может быть, размер высоты чтения mat-toolbar вместо жесткого кодирования?

Ответы [ 2 ]

3 голосов
/ 15 октября 2019

Нет, я бы сказал, что метод calc является лучшим. Вот как я делаю то же самое, по крайней мере. Вы можете защитить себя от случайных изменений дизайна материала, установив себе высоту панели инструментов. Если вы используете SASS, вы можете сохранить высоту панели инструментов в переменной (или на карте с высотой для каждого медиа-запроса, если он изменяется) и использовать ее как для высоты на панели инструментов, так и для расчета сheight: calc(100vh - #{$toolbar-height}).

Редактировать:

Ради интереса я сделал быструю и грязную модель с сеткой CSS. Это работает хорошо, но я не уверен, сколько из этого будет жизнеспособным для вашего конкретного кода, так что ответ все равно остается. Просто вариант для рассмотрения: 

body { margin: 0; padding: 0; }

.main {
  display: grid;
  grid-template-rows: 64px 1fr;
  grid-template-columns: 300px 1fr;
  height: 100vh;
}

.toolbar {
  background:  grey;
  width:       100%;
  grid-column: span 2;
}

.sidebar {
  background: #BAD;
}

.content {
  padding: 24px;
  overflow: auto;
}
<div class="main">
  <div class="toolbar"></div>
  
  <div class="sidebar"></div>
  
  <div class="content">
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia dolores odio consequuntur beatae? Doloribus corrupti accusantium dolore, fuga magni eaque odio perferendis autem voluptatem distinctio alias ducimus consequatur debitis dignissimos.</p>
    
  </div>
</div>
0 голосов
/ 16 октября 2019

Наконец-то я смог сделать это, попробовав некоторое время с fxFlex.

Родительский компонент (который объединяет оба): 

height: 100%
display: flex;

И поместите оба компонента внутрь <div fxLayout="column" fxFlex=100%> <!--components--> </div>

Для <app-navbar> удалите fxFlex идать компонент width: 100%

для <app-sidebar> этого CSS: 

:host {
  overflow: hidden;
  display: flex;
  -webkit-flex: 1;
  -ms-flex: 1;
  -o-flex: 1;
  flex: 1;
  flex-direction: column;
}

и для <mat-sidenav-container> дать fxFlex="100%"

...