Extend UI to Title bar: How to have UI like Figma application?

[Hai Anh Luu]

As the image I attached below, I want to put the Tab bar in the title bar.

Currently, I am coding as follows: self.setWindowFlags(Qt.FramelessWindowHint) and customizing my titlebar with Maximum, Minimize, Close buttons. And I use QTabWidget to manage it.

But I haven't found a solution to the problem: when the user holds the mouse at the tab bar position and drags, the application window must move with the mouse, or when the user has two monitors, when they want to switch applications. From one screen to another, when the user clicks and drags the tab bar, the application can be dragged to another screen. Anyone have idea? Help me please!

[Pl45m4]

@Hai-Anh-Luu said in Extend UI to Title bar: How to have UI like Figma application?:

when the user holds the mouse at the tab bar position and drags, the application window must move with the mouse, or when the user has two monitors, when they want to switch applications.

This is weird design. Why you want it to be like that? How should the tabs move then?
Usually you can drag the QTab and not the whole window like this.

So you are building an app like Firefox or Chrome browser with tabs?
Have you searched if there are any templates or tutorials around?

[Hai Anh Luu]

@Pl45m4 said in Extend UI to Title bar: How to have UI like Figma application?:

So you are building an app like Firefox or Chrome browser with tabs?

Yes, i want to build an app have UI tab like Firefox or Chrome, each tab will contain grid layout for show camera preview. I don't need move tab, i just want have titlebar like that and can drag to move window.

@Pl45m4 said in Extend UI to Title bar: How to have UI like Figma application?:

Have you searched if there are any templates or tutorials around?

I searched a lot but couldn't find the answer

[Hai Anh Luu]

I find this docs in Microsoft, but they use C#. I don't know If Qt can do the same as them?

Microsoft Title bar