web-dev-qa-db-fra.com

Angular Hauteur de l'onglet de matériau

J'essaie d'avoir une page complète Angular Onglet Material qui a des onglets qui sont pleine hauteur et ont un message centré. J'ai créé ce stakblitz comme je ne peux pas les fxFill ne semblent pas remplir et je ne sais pas si c'est un problème avec la disposition Flexbox ou Angular Material. I ne voulez pas forcer une hauteur comme dans chaque onglet car cela semble vaincre le point des dispositions flexibles.

Je suis sûr que c'est simple mais aidez un pauvre développeur confus qui est habitué à Bootstrap grid :)

[~ # ~] mise à jour [~ # ~] Ajout de hauteur: calc (100vh - 100px); au parent div et puis également au div grand.component fait fonctionner les choses mais c'est sûrement une mauvaise solution

angularangular-flex-layout
8
Mad Eddie

Pour remplir la page, la page doit remplir la fenêtre:

styles.css 

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

Le composant d'application doit remplir le corps:

app.component.css 

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

Par défaut, les enveloppes du contenu dans les onglets ne remplissent pas la hauteur de l'onglet, nous allons donc corriger cela:

styles.css 

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

Nous devons également avoir le mat-tab-group remplit la hauteur, son parent doit également remplir la hauteur, nous allons donc donner un identifiant à la fois au wrapper et au groupe d'onglets.

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

18
Ploppy

Ceci est travaillé pour moi pour attribuer une valeur dynamique à la hauteur.

:Host ::ng-deep .mat-tab-body-wrapper {
  height: 600px;

}

:Host ::ng-deep .mat-tab-body.mat-tab-body-active {
  height: 600px;

}
1
haranloga