Высота вкладки Угловой материал - PullRequest
Новая
       7

Высота вкладки Угловой материал

0 голосов
/ 06 июня 2018

Я пытаюсь открыть вкладку Угловой материал на всю страницу, которая имеет вкладки полной высоты и центрированное сообщение.Я создал этот stakblitz , так как не могу заставить его работать.FxFill, кажется, не Fill, и я не уверен, если это проблема с макетом Flexbox или Angular Material.Я не хочу задавать высоту как внутри каждой вкладки, так как она, кажется, побеждает точку гибких макетов.

Я уверен, что это просто, но помогите плохому растерянному разработчику, который привык к сетке Bootstrap:)

ОБНОВЛЕНИЕ Добавление высота: calc (100vh - 100px); к родительскому div, а затем к div.com tall.component заставляет работать, но конечно, это плохое решение

Ответы [ 2 ]

0 голосов
/ 11 апреля 2019

Согласно Angular Docs : вам нужно установить для dynamicHeight значение true [dynamicHeight]='true'

По умолчанию группа вкладок не изменитсяего высота до высоты активной в данный момент вкладки.Чтобы изменить это, установите для параметра dynamicHeight значение true.Тело вкладки будет анимировать ее высоту в соответствии с высотой активной вкладки.

0 голосов
/ 06 июня 2018

Чтобы заполнить страницу, страница должна заполнить окно:

styles.css 

body, html{
  height: 100%;
  margin: 0;
}

Компонент приложения должен заполнить тело:

app.component.css 

:host{
  box-sizing: border-box;
  display: block;
  height: 100%;
}

По умолчанию оболочки содержимого вкладок не заполняют высоту вкладки, поэтому мы исправим это:

styles.css 

.mat-tab-body-wrapper{
  flex-grow: 1;
}

Нам также нужно, чтобы mat-tab-group заполнил высоту, его родитель должен также заполнить высоту, поэтому мы дадимидентификатор как для оболочки, так и для группы вкладок.

app.component.ts 

<div id="wrapper"> <!-- give it an id -->
    <div fxLayout="row" fxLayoutGap="16px" fxFill>
        <div fxFlex="20">
            <p>Fun Sidebar</p>
        </div>
        <div fxFlex="80" fxFill>
            <mat-tab-group id="tab-group"> <!-- give it an id -->
                <mat-tab label="Summary">
                    <div fxFlex style="padding: 16px;">
                        <div class="mat-display-2">Hello</div>
                        <p>Lorem ipsulem</p>
                    </div>
                </mat-tab>
                <mat-tab label="Tall content">
                    <app-tall-component></app-tall-component>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</div>

app.component.css 

#wrapper{
  padding: 16px; 
  min-height: 100%; 
  height: 100%; 
  box-sizing: border-box;/*new*/
}
#tab-group{
  height: 100%;
}
#tab-group mat-tab-body {
  flex-grow: 1;
}

https://stackblitz.com/edit/angular-awamwn?file=src%2Fapp%2Fapp.component.html

...