I have worked on implementing tabs and I think I'm quite happy with the result so far. I have mostly been spending my time getting the UI to look good with some animations _(the animations could use some more work though)_.
It's possible to rearrange tabs by dragging a tab left and right. Simple stuff like closing a tab also works. I do need to get the shortcut `CMD + W` to work as well, so it's faster to close tabs. The home-tab cannot be closed, so when the user selects the home-tab (or there is no other tabs except home-tab) and clicks the close-shortcut, it will not close the tab, but instead close the window.
**Problem:** It's only possible to drag tabs in the horizontal direction (x-axis). This means, tabs can only be dragged inside the tab-area. But ideally, it should be possible to drag tabs outside the tab-area. When doing so and releasing the tab, it should open the tab in a new window.
I'm struggling a bit to get this behavior working. Funny enough, it works fine except when using a ScrollView, because then the tab will clip to the ScrollView. This means the tab will just be hidden in the UI when trying to drag it outside the ScrollView...
I am switching between a normal HStack and a ScrollView depending on the amount of tabs. If there are too many tabs to show in the viewport, the app will switch over to using a ScrollView, and this is where the problem begins, because it hides the tab when trying to drag outside. Also, the switching between HStack and ScrollView can cause some glitches. #dev #SwiftUI #AppKit
https://video.nostr.build/225dbaade0f094f3e47cf72609d6adc39a0ee3a1004ff44092e0091e43115f2c.mp4
Login to reply
Replies (4)
I think a possible solution to dragging tabs out of the tab-area would be to simply use an overlay that appears only when dragging outside.
When dragging a tab inside the tab-area, it should drag the actual tab. However, when dragging outside, it should switch to dragging an overlay and just leave the real tab. This way, we should be able to avoid the issue of the tab getting clipped.
That could probably be a solution 🤔
But I’m certainly not a fan of the overlay-approach. It will not look as nice, but it will absolutely be functional.
There has gotta be a way to solve the clipping issue when using a ScrollView.
This is looking interestingly good, would love to try your todo app sometime.
Thank you. There’s still much work to be done. It’s my first project using the Swift language, so things are taking extra long because I’m learning while I’m building.