QTabWidget with bottom left rounded tabs & rotated icon + text
-
Hello fellow Qt-fans,
Our company hired a UX designer to re-design the UI for our application, which currently uses Qt Widgets for its UI. This is our current design:
Our designer came up with the design below, which I am trying to implement:
So far I managed to get to this point, using a combination of style sheets and setting icons from code:
However, this is where I got stuck. So far, I have not found a way to:
- put the tabs on the bottom of the left side of the TabBar
- rotate the tab icons
- rotate the text below the icons inside the tabs
I have spent a few days searching the web and trying things out, but I only found a suggestion that I might be able to use a combination of a QListWidget with a QStackedWidget. However, I am not sure if it is worth the effort and whether it will give me a new set of problems. Another way might be overriding QStyle for the tab bar or some magic combination of techniques.
Are there any experts here who know what might be the most likely way to achieve the design? (switching the whole UI to QML is currently not an option)
-
Hello fellow Qt-fans,
Our company hired a UX designer to re-design the UI for our application, which currently uses Qt Widgets for its UI. This is our current design:
Our designer came up with the design below, which I am trying to implement:
So far I managed to get to this point, using a combination of style sheets and setting icons from code:
However, this is where I got stuck. So far, I have not found a way to:
- put the tabs on the bottom of the left side of the TabBar
- rotate the tab icons
- rotate the text below the icons inside the tabs
I have spent a few days searching the web and trying things out, but I only found a suggestion that I might be able to use a combination of a QListWidget with a QStackedWidget. However, I am not sure if it is worth the effort and whether it will give me a new set of problems. Another way might be overriding QStyle for the tab bar or some magic combination of techniques.
Are there any experts here who know what might be the most likely way to achieve the design? (switching the whole UI to QML is currently not an option)
@dano said in QTabWidget with bottom left rounded tabs & rotated icon + text:
I have spent a few days searching the web and trying things out, but I only found a suggestion that I might be able to use a combination of a QListWidget with a QStackedWidget
Without reading this, this is what I thought at first...
I don't think aQTabWidgetis best in place here. The design looks like aQStackedWidgetfor the main part in the middle and just another "bar" / menu-like widget with buttons on the left (using stylesheet to make it look like it is shown).IIRC there are templates out there which have exactly this kind of layout and app structure.
I am not sure if it is worth the effort
I mean you want this design above? Why it shouldn't be worth the effort?! It's not even that much and not that complicated.
-
@Pl45m4 Thanks for your quick reply.
I've used a QListWidget/QStackedWidget combination in the past, but I remember that it took quite some effort to get all the details right. Possibly more than customizing QTabWidget's QStyle. That's what I meant with "I am not sure if it is worth the effort". =))) I am implementing the design one way or another.
Thanks for the help, I will try out the QListWidget thing.
-
@Pl45m4 Thanks for your quick reply.
I've used a QListWidget/QStackedWidget combination in the past, but I remember that it took quite some effort to get all the details right. Possibly more than customizing QTabWidget's QStyle. That's what I meant with "I am not sure if it is worth the effort". =))) I am implementing the design one way or another.
Thanks for the help, I will try out the QListWidget thing.
@dano said in QTabWidget with bottom left rounded tabs & rotated icon + text:
QListWidget thing.
I don't see why you need a
QListWidgetthere.
Just aQStackedWidgetfor the content and the sidebar widget with buttons on the left to select the right page.
