Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

feat: 为tab增加data-tab来储存string类型标题 #221

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

sosohime
Copy link

解决tab active以后加粗字体宽度变化,导致tab跳动的问题
对应在css增加

      &&::after {
        display: block;
        content: attr(data-tab);
        font-weight: 500;
        height: 0;
        color: transparent;
        overflow: hidden;
        visibility: hidden;
      }

issue: ant-design/ant-design#18652
pr: ant-design/ant-design#18940

@sosohime sosohime changed the title 为tab增加data-tab来储存string类型标题 feat: 为tab增加data-tab来储存string类型标题 Sep 23, 2019
@coveralls
Copy link

coveralls commented Sep 23, 2019

Coverage Status

Coverage remained the same at 72.521% when pulling 2c1f7fa on sosohime:save_tab_data into 354a228 on react-component:master.

src/TabBarTabsNode.js Outdated Show resolved Hide resolved
@dengfuping
Copy link

@zombieJ 帮忙看下这个 PR,如果没问题 merge 后发个版本吧,我好像没有 rc 组件库的发版权限。

@zombieJ
Copy link
Member

zombieJ commented Sep 29, 2019

这个 fix 耦合度太高了,而且也解决不了 tab 是 ReactNode 的情况。

@sosohime
Copy link
Author

sosohime commented Sep 29, 2019

这个 fix 耦合度太高了,而且也解决不了 tab 是 ReactNode 的情况。

这种伪元素的方式兼容性会高一些,之前有考虑过text-shadowletter-spacing负值的方案,但都不尽人意
传入ReactNode应该多为用户高度定制化的需求,可能涉及到处理一些图标的工作,与其考虑遍历子节点进行修改,不如交由用户自己处理

具体讨论

@zombieJ
Copy link
Member

zombieJ commented Sep 29, 2019

不要遍历子节点,得找找其他方式来支持 ReactNode。

@sosohime
Copy link
Author

不要遍历子节点,得找找其他方式来支持 ReactNode。

有思路嘛

@zombieJ
Copy link
Member

zombieJ commented Oct 1, 2019

目前想法是切换高亮时记录一下宽度,将 padding left 暂时去掉保持宽度。不知道还有没有更好的。

@sosohime
Copy link
Author

sosohime commented Oct 8, 2019

记录宽度感觉不可行,假设一种 ReactNode 的场景:
tab title 可编辑
还是感觉只对 String 进行兼容即可

@zombieJ
Copy link
Member

zombieJ commented Oct 8, 2019

可编辑不影响,宽度没有变化。

1 similar comment
@zombieJ
Copy link
Member

zombieJ commented Oct 8, 2019

可编辑不影响,宽度没有变化。

@sosohime
Copy link
Author

sosohime commented Oct 8, 2019

改了字数宽度咋不会变-。-

@zombieJ
Copy link
Member

zombieJ commented Oct 11, 2019

点击记录宽度
取消选中项 padding-left,并设置 min-width 为记录宽度

用户如果多写字,就顶出来。不写字它就还是一样的宽度。不锁死就行了。

@sosohime
Copy link
Author

sosohime commented Oct 11, 2019

demo
这种情况下-。-,还要分成两种来看,考虑当前编辑的是否是active的tab

@zombieJ
Copy link
Member

zombieJ commented Oct 11, 2019

嗯,在 active 前记录,active 时固定。

@zombieJ
Copy link
Member

zombieJ commented Oct 11, 2019

感觉还是没有必要,如果是直接的编辑标题输入超出长度应该也会不好看。按照你的这个思路搞一个 Demo 插入 ReactNode 到 tab 里,作为 FAQ 给用户好了。关心偏移的用户让他们自己抄一下 Demo。

@sosohime
Copy link
Author

sosohime commented Oct 11, 2019

ok,那我们 string 类型的还做兼容么

@zombieJ
Copy link
Member

zombieJ commented Oct 12, 2019

Tabs 上不做了,有需求的用户抄你的 Demo 就行了。这样如果他们想搞 ReactNode 作为 title 的,也可以自己依样画葫芦。

@afc163
Copy link
Member

afc163 commented Apr 11, 2020

Any progress?

@sosohime
Copy link
Author

看起来这个解决方案最终没有得到统一。
@zombieJ 的意见应该是这里不做改动,因为这个方案无法解决Title为ReactNode的情况,建议给出一个 Demo 让用户参考。
我的想法是采用这个方案,使用String Title的问题可以得到解决,然后在这个基础上再给出ReactNode的解决方案-。-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants