angular / angular/components

[Tabs] Tab label not fully shown when added past overflow

未关闭
#9,178 2 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
area: material/tabs P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Tab is selected after being added to mat-tab-group and is in full view.

#### What is the current behavior?
Tab is selected and is hidden behind the paginators.

#### What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-c9hsyv
In the stackblitz above, add tabs until the paginator is shown. The tab will be partial hidden by the paginator.
![material-tab-bug](https://user-images.githubusercontent.com/3068898/34464804-13f95dae-ee5f-11e7-831c-1ef7fd3b3595.PNG)

#### What is the use-case or motivation for changing an existing behavior?
Navigating the user to the tab they just opened.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: any
Material: 5.0.0
OS: any
TypeScript: 2.4.2
Browsers: any

#### Is there anything else we should know?
A related issue which can also be seen in the stackbliz provided, is that the transform of the bar is not correctly updating when removing tabs. Steps to reproduce: Add 4(or enough tabs to show pagination) tabs (pagination will be shown and last tab will be selected).
Remove the third tab by clicking the X on the label. Pagination is shown until clicking on the label. It then updates and removes the pagination controls since the content can fit.
![beforeclickinglabel](https://user-images.githubusercontent.com/3068898/34464799-11470228-ee5f-11e7-92f6-18643e852a62.PNG)
![afterclickinglabel](https://user-images.githubusercontent.com/3068898/34464798-0f975bb2-ee5f-11e7-84f9-493be75ad855.PNG)

Both issues seem to be related to the animation of the inkbar. (ink-bar.ts line 35) Performing the left calculation in the animation frame plus the delay of the actual animation happens after all the calculations to show/hide the paginator controls.

贡献指南

打开贡献指南

调研方向

在链接的 StackBlitz 中复现标签页溢出和移除标签页的情况,然后检查第 35 行附近的 ink-bar.ts 以及标签页分页行为。确认新添加的选中标签页完全可见,并且移除标签页后 paginator 会在无需额外点击的情况下更新;如果找到相关的测试入口,请使用回归测试覆盖这两种行为。

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

评估

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

把新 issue 发到你的邮箱

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