angular / angular/components

feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group

Ouverte
#27,162 9 commentaires 17 réactions 0 personnes assignées Voir sur GitHub
feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Feature Description

Currently, the best solution I've found is to override:

`::ng-deep .mat-mdc-tab-body-wrapper { flex-grow: 1; }`

See this [reproduction](https://stackblitz.com/edit/1kawpj?file=src%2Fexample%2Ftab-group-basic-example.html,src%2Fexample%2Ftab-group-basic-example.scss).

If `flex-grow: 1` was added to the body wrapper or an API option provided that allowed that behaviour without using `::ng-deep`, that would be great. Thanks.

### Use Case

Situations where I want a tab group to occupy the full height available and have its contents expand to the available height. E.g. a table or text editing component inside a tab that is scrollable but should occupy as much of the height available as possible.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée, en particulier src/example/tab-group-basic-example.html et src/example/tab-group-basic-example.scss, et examinez la manière dont mat-tab-group agence son body. Comparez le workaround ::ng-deep flex-grow existant avec le comportement demandé ; le travail est terminé lorsqu’un groupe d’onglets peut remplir la hauteur disponible et que son contenu peut s’agrandir sans cet override.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
48/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.