angular / angular/components

feat(Tabs): Tab list should be scrollable to match Material Design Guidelines

未关闭
#19,449 10 条评论 28 个 reaction 已指派 0 人 在 GitHub 查看
area: material/tabs feature material spec P3
主要语言
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

把新 issue 发到你的邮箱

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