feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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.
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione StackBlitz collegata, in particolare da src/example/tab-group-basic-example.html e src/example/tab-group-basic-example.scss, e analizza come mat-tab-group dispone il proprio body. Confronta il workaround ::ng-deep flex-grow esistente con il comportamento richiesto; il lavoro è completato quando un gruppo di schede può occupare tutta l’altezza disponibile e il suo contenuto può espandersi senza quell’override.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 48/100