Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

tabs宽度溢出时,显示滚动条 #2128

Open
Tracked by #6736 ...
jahnli opened this issue Jan 6, 2022 · 18 comments
Open
Tracked by #6736 ...

tabs宽度溢出时,显示滚动条 #2128

jahnli opened this issue Jan 6, 2022 · 18 comments
Labels
feature request New feature or request priority: low

Comments

@jahnli
Copy link
Collaborator

jahnli commented Jan 6, 2022

This function solves the problem (这个功能解决的问题)

tabs宽度超出时,无法通过鼠标滑动的问题。

Expected API (期望的 API)

tabs宽度超出时,显示滚动条
我目前的做法是n-tabs-wrapper 设置overflow: auto,但原生滚动天丑了,希望能做优化,在tabs溢出时显示滚动条

@github-actions github-actions bot added the feature request New feature or request label Jan 6, 2022
@jahnli
Copy link
Collaborator Author

jahnli commented Jan 6, 2022

image

只能鼠标滚轮滑动,无法像手机端点击最后一个 向左滑动一个 , 或显示滚动条

@07akioni
Copy link
Collaborator

07akioni commented Jan 6, 2022

我个人是感觉滑动挺够用了,为啥非得要滚动条或者点击滚呢

@07akioni
Copy link
Collaborator

07akioni commented Jan 6, 2022

弄成 antd 那种收集点不到的我也能接受

@07akioni
Copy link
Collaborator

07akioni commented Jan 6, 2022

这个地方专门弄个条肯定是好看不起来的

@07akioni
Copy link
Collaborator

07akioni commented Jan 6, 2022

非要说好的条我是觉得 vscode 的不错,但是它的样式显然是为专用场景优化过的,不适合咱们的情况

image

@jahnli
Copy link
Collaborator Author

jahnli commented Jan 7, 2022

的确,滚动条不符合,是否可以类似于手机端tabs,如果点击的是可显区域的最后一个,就往左偏移一些
类似:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab 标签栏滚动

@yanbowe
Copy link

yanbowe commented Jan 7, 2022

感觉弄成antd的那种就不错,不然超出的时候某些用户根本就不知道还有没有其他tab

@jahnli
Copy link
Collaborator Author

jahnli commented Jan 7, 2022

带箭头的确有点丑陋,vant的方式感觉和谐

感觉弄成antd的那种就不错,不然超出的时候某些用户根本就不知道还有没有其他tab

@Nakus0426
Copy link
Contributor

是的,始终保持选中的tab在画面中是很有必要的,类似官网上的那个naive admin里的路由标签页的效果就很合适

@07akioni
Copy link
Collaborator

07akioni commented Jan 7, 2022

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab

超出的时候有阴影,大概率用户还是可以看出来的

@ismeljm
Copy link

ismeljm commented Jan 8, 2022

我也觉得加个滚动条或者像antd那样也行,因为我们面向的用户各式各样的都有,不一定所有人都能够直接看的明白隐藏了的标签是使用滚轮才可以看得见。另外,如果不小心坏了滚轮,这滚动功能就没法用了,用户体验不太好。

@yanbowe
Copy link

yanbowe commented Jan 8, 2022

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab

超出的时候有阴影,大概率用户还是可以看出来的

大多数用户可以,但是看不出来的用户还是占比非常高的,我目前面向的用户群体就是这样,滚轮也不知道用,出现滚动条就只拉着滚动条往下滑。

@07akioni
Copy link
Collaborator

07akioni commented Jan 8, 2022

https://vant-contrib.gitee.io/vant/v3/#/zh-CN/tab

超出的时候有阴影,大概率用户还是可以看出来的

大多数用户可以,但是看不出来的用户还是占比非常高的,我目前面向的用户群体就是这样,滚轮也不知道用,出现滚动条就只拉着滚动条往下滑。

可以理解,会考虑使用 antd 那种风格

@07akioni
Copy link
Collaborator

07akioni commented Jan 8, 2022

这应该是一个比较长期的工作了

@kurerere
Copy link

主要是没有过渡 看起来太生硬了

@sky124380729
Copy link

这应该是一个比较长期的工作了

快一年啦,啥时候支持呢

@libsgh
Copy link

libsgh commented Nov 28, 2023

2023年了...

@Guan-Meng-Yuan
Copy link

2024年了...

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
feature request New feature or request priority: low
Projects
None yet
Development

No branches or pull requests

9 participants