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 个 reaction 已指派 0 人 在 GitHub 查看
feature P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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 workaround 与所要求的行为进行比较;完成的标准是选项卡组可以填满可用高度,并且其内容无需该 override 即可展开。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。