naive-ui icon indicating copy to clipboard operation
naive-ui copied to clipboard

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

Open jahnli opened this issue 2 years ago • 15 comments

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

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

Expected API (期望的 API)

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

jahnli avatar Jan 06 '22 16:01 jahnli

image

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

jahnli avatar Jan 06 '22 16:01 jahnli

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

07akioni avatar Jan 06 '22 17:01 07akioni

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

07akioni avatar Jan 06 '22 17:01 07akioni

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

07akioni avatar Jan 06 '22 17:01 07akioni

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

image

07akioni avatar Jan 06 '22 17:01 07akioni

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

jahnli avatar Jan 07 '22 01:01 jahnli

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

yanbowe avatar Jan 07 '22 01:01 yanbowe

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

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

jahnli avatar Jan 07 '22 01:01 jahnli

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

Nakus0426 avatar Jan 07 '22 02:01 Nakus0426

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

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

07akioni avatar Jan 07 '22 05:01 07akioni

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

ismeljm avatar Jan 08 '22 00:01 ismeljm

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

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

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

yanbowe avatar Jan 08 '22 01:01 yanbowe

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

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

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

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

07akioni avatar Jan 08 '22 07:01 07akioni

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

07akioni avatar Jan 08 '22 07:01 07akioni

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

kurerere avatar Jun 22 '22 09:06 kurerere

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

快一年啦,啥时候支持呢

sky124380729 avatar Nov 04 '22 02:11 sky124380729

2023年了...

libsgh avatar Nov 28 '23 09:11 libsgh