Tabs - Add Arrows Prop for Scrolling Horizontal Tabs

[abhishek-junghare]

Clear and concise description of the problem

Tabs component - https://www.naiveui.com/en-US/os-theme/components/tabs

Currently, users can scroll through horizontal tabs, but currently there is no prop to show arrows to indicate that more tabs exist beyond the visible area. This creates usability issues -

• Users may not even realize that there are more tabs to the right.
• Even if the last "visible" tab is only partially displayed, clicking on it only scrolls to the end of "that" tab, misleading users into thinking that they have reached to the end of the tabs.
• Many users are unaware that they can middle-click to enable horizontal scrolling. Though, this isn't a user friendly scrolling method anyway.

Suggested solution

Introduce navigation arrows prop to improve discoverability and usability:

• Show a right arrow if there are more tabs to the right.
• Show a left arrow if there are more tabs to the left.
• Show both arrows if there are additional tabs on both sides.
• Hide the arrows when all tabs are fully visible.

This enhancement will improve navigation and ensure users are aware of all available tabs.

Alternative

No response

Additional context

Why arrows matter?

• Users will immediately know there are more tabs available.
• But more important than - arrows provide a user-friendly navigation.

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.