Skip to content

fix(Tabs): fix insufficient split divider line length in scrollable s…#2183

Merged
anlyyao merged 4 commits intodevelopfrom
fix/tabs/split
Mar 25, 2026
Merged

fix(Tabs): fix insufficient split divider line length in scrollable s…#2183
anlyyao merged 4 commits intodevelopfrom
fix/tabs/split

Conversation

@anlyyao
Copy link
Copy Markdown
Collaborator

@anlyyao anlyyao commented Mar 24, 2026

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

fix #2180

相关 PRs

Tencent/tdesign-common#2455

💡 需求背景和解决方案

问题原因:

  • ::after 在 scroll 容器上:left:0; right:0 只覆盖视口宽度
  • ::after 在 wrapper 上:同样只覆盖视口宽度(绝对定位计算问题)

方案:

  • 将 .border() 放在 __nav 元素上(scroll 的父元素)。__nav 是一个普通的 flex 容器,width: 100%,没有 overflow,没有滚动。在它上面用 .border() mixin 生成的 ::after 伪元素 left:0; right:0 就是完整的屏幕宽度

📝 更新日志

  • fix(Tabs): 修复 split 分割线在可滚动场景下长度不足

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 24, 2026

完成

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 24, 2026

commit: aa404b4

@anlyyao anlyyao merged commit 0cf47f7 into develop Mar 25, 2026
9 checks passed
@anlyyao anlyyao deleted the fix/tabs/split branch March 25, 2026 03:29
@github-actions github-actions bot mentioned this pull request Mar 26, 2026
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.

[Tabs] 标签卡滑动后, 底部的分割线显示异常

1 participant