angular / angular/components

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

オープン
#27,162 コメント 9 件 リアクション 17 件 担当者 0 名 GitHub で見る
feature P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現コードから始め、特に src/example/tab-group-basic-example.html と src/example/tab-group-basic-example.scss を確認し、mat-tab-group が body をどのようにレイアウトしているかを調べます。既存の ::ng-deep flex-grow ワークアラウンドと要求された動作を比較します。タブグループが利用可能な高さを埋められ、そのコンテンツがその override なしで拡張できれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
48/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。