Skip to content

feat(components): [tabs] support scrolling via touch#24292

Merged
btea merged 4 commits into
devfrom
feat/tabs-support-touch-scroll
May 26, 2026
Merged

feat(components): [tabs] support scrolling via touch#24292
btea merged 4 commits into
devfrom
feat/tabs-support-touch-scroll

Conversation

@rzzf
Copy link
Copy Markdown
Member

@rzzf rzzf commented May 22, 2026 •
edited by coderabbitai Bot
Loading

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

close #24289
close #24094

follow up #23341

Summary by CodeRabbit

  • New Features
    • Tab navigation now supports touch-based scrolling with gesture detection that identifies the primary movement direction.
    • Tab transition animations automatically disable during active touch or wheel scrolling interactions for a smoother user experience.
    • Added comprehensive touch event handlers (start, move, end, cancel) to manage scroll state and transitions throughout the interaction lifecycle.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 22, 2026 •
edited
Loading

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c7d9307d-97c0-4719-b02a-5cc15a7fca56

📥 Commits

Reviewing files that changed from the base of the PR and between 215a165 and be95364.

📒 Files selected for processing (2)
  • packages/components/tabs/src/composables/use-tab-nav-touch.ts
  • packages/components/tabs/src/tab-nav.tsx
📝 Walkthrough

Walkthrough

The PR introduces touch scrolling for tab navigation. A new useTabNavTouch composable handles touch gesture tracking, calculates scroll offsets based on touch movement, prevents default scrolling when appropriate, and manages the touch scrolling state. The TabNav component imports and invokes this composable, wires its handlers to tablist touch events, and updates CSS transition logic to account for active touch scrolling.

Changes

Touch scrolling implementation

Layer / File(s) Summary
useTabNavTouch composable: types, gesture logic, and API
packages/components/tabs/src/composables/use-tab-nav-touch.ts		 Defines Scrollable and UseTabNavTouchParams types. Implements touch lifecycle handlers (start, move, end) that track gesture coordinates, determine touch axis with a threshold, calculate clamped navigation offset, call preventDefault() during active scrolling, and expose isTouchScrolling state and touch handlers.
TabNav integration: imports, invocation, wiring, and transition updates
packages/components/tabs/src/tab-nav.tsx		 Imports useTabNavTouch and the Scrollable type from the new composable. Removes the local Scrollable interface. Invokes the composable with scroll state and measurements to capture handlers and isTouchScrolling flag. Wires the returned handlers to the tablist element's touch event listeners. Updates CSS transition logic to disable transitions during both wheel and touch scrolling.

Possibly related PRs

  • element-plus/element-plus#23775: Both PRs modify packages/components/tabs/src/tab-nav.tsx to conditionally disable the nav transition during active scroll handling (wheel in #23775, wheel-or-touch in the main PR).

Suggested labels

Needs Review

Suggested reviewers

  • btea
  • keeplearning66

Poem

🐰 A touch of grace for tabs so wide,
Fingers swipe with smooth, steady glide,
Offsets clamp, transitions pause just right,
Scrolling flows—both day and night! ✨

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'feat(components): [tabs] support scrolling via touch' accurately describes the main change: adding touch scrolling support to the tabs component.
Description check ✅ Passed The PR description includes the contributor checklist template with issue references (#24289, #24094) and follow-up reference (#23341), providing context and compliance with repository guidelines.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/tabs-support-touch-scroll

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented May 22, 2026 •
edited
Loading

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@24292

npm i https://pkg.pr.new/element-plus@24292

yarn add https://pkg.pr.new/[email protected]

commit: be95364

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 22, 2026 •
edited
Loading

Size Change: +1.88 kB (+0.13%)

Total Size: 1.44 MB

📦 View Changed
Filename Size Change
dist/element-plus/dist/index.full.js 414 kB +567 B (+0.14%)
dist/element-plus/dist/index.full.min.js 290 kB +354 B (+0.12%)
dist/element-plus/dist/index.full.min.mjs 283 kB +367 B (+0.13%)
dist/element-plus/dist/index.full.mjs 404 kB +592 B (+0.15%)
ℹ️ View Unchanged
Filename Size
dist/element-plus/dist/index.css 47.3 kB

compressed-size-action

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 22, 2026 •
edited
Loading

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 86.21% 18713 / 21705
🔵 Statements 85.03% 19594 / 23042
🔵 Functions 84.61% 4956 / 5857
🔵 Branches 75.71% 10933 / 14439
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/components/tabs/src/tab-nav.tsx 59.35% 45.94% 52.27% 60.58% 51, 90, 133, 136, 141-154, 159-162, 180-191, 195-209, 216-231, 236-254, 258, 268-275, 280, 299, 334-337, 341-344, 348-351, 356, 379-390, 443-444, 455
packages/components/tabs/src/composables/use-tab-nav-touch.ts 19.51% 0% 20% 20.51% 37, 43-51, 55-99, 103-105
Generated in workflow #2943 for commit be95364 by the Vitest Coverage Report Action

@rzzf rzzf changed the title feat(components): [tabs] suppport scrolling via touch feat(components): [tabs] support scrolling via touch May 22, 2026
chatgpt-codex-connector[bot]
chatgpt-codex-connector Bot reviewed May 24, 2026
View reviewed changes
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d5261192b7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/components/tabs/src/use-tab-nav-touch.ts Outdated
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 24, 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 24, 2026 •
edited
Loading

🧪 Playground Preview: https://element-plus.run/?pr=24292
Please comment the example via this playground if needed.

@toesbieya
Copy link
Copy Markdown

toesbieya commented May 25, 2026

tabs的滚动为啥是transform而不是原生滚动嘞，现在加功能感觉好痛苦

@rzzf
Copy link
Copy Markdown
Member Author

rzzf commented May 25, 2026

tabs的滚动为啥是transform而不是原生滚动嘞，现在加功能感觉好痛苦

这应该是从Element UI继承过来的，设计使然。“加功能好痛苦”具体指什么？有例子吗？

@toesbieya
Copy link
Copy Markdown

toesbieya commented May 25, 2026

tabs的滚动为啥是transform而不是原生滚动嘞，现在加功能感觉好痛苦

这应该是从Element UI继承过来的，设计使然。“加功能好痛苦”具体指什么？有例子吗？

单指本次改动，为了触摸屏能滚动还要监听触摸事件手动设置transform，如果原生滚动就不需要改了

@rzzf
Copy link
Copy Markdown
Member Author

rzzf commented May 25, 2026

我同意你的观点，也许将来可以重构。

keeplearning66
keeplearning66 approved these changes May 26, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@keeplearning66 keeplearning66 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@btea btea merged commit 69a6167 into dev May 26, 2026
17 checks passed
@btea btea deleted the feat/tabs-support-touch-scroll branch May 26, 2026 05:17
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 26, 2026

@rzzf Thanks for your contribution! ❤️

@element-bot element-bot mentioned this pull request May 29, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@chatgpt-codex-connector chatgpt-codex-connector[bot] chatgpt-codex-connector[bot] left review comments

@btea btea btea approved these changes

@keeplearning66 keeplearning66 keeplearning66 approved these changes

Assignees

@rzzf rzzf

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@rzzf @toesbieya @btea @keeplearning66