feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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.
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion, insbesondere mit src/example/tab-group-basic-example.html und src/example/tab-group-basic-example.scss, und untersuche, wie die mat-tab-group ihren Body anordnet. Vergleiche den vorhandenen ::ng-deep flex-grow-Workaround mit dem angeforderten Verhalten; abgeschlossen ist die Aufgabe, wenn eine Tab-Gruppe die verfügbare Höhe ausfüllen kann und ihre Inhalte sich ohne dieses Override erweitern können.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100