Topic: Improve Tabs component with horizontal scrolling, paging or with a dropdown
UNNdev priority asked 3 years ago
Expected behavior
When there is not enough horizontal room to display all tabs, they should be horizontally scrollable or pageable with clickable left and right arrows for mouse users, and swipeable for mobile or tablet users.
Another option would be hiding all tabs that don't fit behind a dropdown. Selecting a tab from that dropdown would replace the last visible tab with the one selected, or some other fancy logic.
Some ideas:
https://material.angular.io/components/tabs/examples#tab-group-dynamic (add many tabs until they would overflow)
Actual behavior
Tabs wrap to the next line usually resulting in an undesired layout.
Michał Duszak staff answered 3 years ago
Hello, thank you for your feedback. Our tabs are meant to behave just like the Bootstrap 5 Tabs. However we will consider adding an option to change behaviour of big amount of tabs on different screen widths.
Keep Coding,
Michał
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.7.1
- Device: All devices
- Browser: All browsers
- OS: All operating systems
- Provided sample code: No
- Provided link: Yes