feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group
- 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