feat(Tabs): Tab list should be scrollable to match Material Design Guidelines
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 91
描述
#### Reproduction
https://stackblitz.com/edit/angular-yk3xrb
Steps to reproduce:
1. Load above stackblitz in mobile view.
2. Try to grab and swipe the tabs left or right.
* Alternatively use `Shift` + `Mouse Scroll` to attempt to scroll the tabs left/right.
#### Expected Behavior
The tabs should be x-scrollable as defined in the spec: https://material.io/components/tabs (Switch from `Fixed` to `Scrollable` type)
#### Actual Behavior
Tabs can not be scrolled by swiping/shift scrolling.
This is mainly a big issue for mobile devices. As tapping the left and right buttons is much slower and unnatural than swiping over the tabs.
You can manually set `overflow-x: scroll` on the container, but that breaks as soon as you select another tab since angular applies translation to the whole thing. See [this stackoverflow ](https://stackoverflow.com/questions/57888846/set-horizontal-scroll-in-angular-material-tabs) for attempts at solving the issue.
贡献指南
调研方向
从链接的 StackBlitz 复现开始,将当前选项卡的行为与 Material Design 选项卡规范进行比较。追踪负责选项卡滚动和位移的 Angular Material 选项卡实现,然后验证移动端滑动和 Shift 加鼠标滚轮滚动能够正常工作,而不会破坏选择或定位。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 功能
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 38/100