Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Update: Forum Guidelines & Code of Conduct

    QTabView - TabBar area background color

    QML and Qt Quick
    2
    4
    2932
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      DBoosalis last edited by

      I added a TabView to a QDialog. I want to set the color of the tab area background, it is always white and I want it to be the color of the Dialog. Here is what I have in C++:

      @QQuickView *aboutView = new QQuickView(QUrl("qrc:qml/helpAbout.qml"));
      QQuickItem *qmlObject = aboutView->rootObject();
      qmlObject->setProperty("color",aboutDialog->palette().color(QPalette::Window));
      aboutView->setResizeMode(QQuickView::SizeRootObjectToView);
      QWidget *aboutWidget = QWidget::createWindowContainer(aboutView,0);
      aboutWidget->setPalette(aboutDialog->palette());@

      And I have tried to fool around with the style but do not see a tab area color attribute. Here is my QML file:

      @TabView {
      id:tv
      style: TabViewStyle {
      frameOverlap: 1
      tab: Rectangle {
      color: styleData.selected ? "steelblue" :"lightsteelblue"
      implicitWidth: Math.max(text.width + 4, 80)
      implicitHeight: 20
      radius: 2
      Text {
      id: text
      anchors.centerIn: parent
      text: styleData.title
      color: styleData.selected ? "white" : "black"
      }
      }
      frame: Rectangle { color: "steelblue" }
      }
      anchors.fill: parent
      @

      Any help very much appreciated
      -David

      1 Reply Last reply Reply Quote 0
      • D
        dasRicardo last edited by

        Hmmm take a look at "this":http://qt-project.org/doc/qt-5/qml-qtquick-controls-styles-tabviewstyle.html#tabBar-prop so the simplest solution is something like this:

        @
        TabView {
        id:tv
        style: TabViewStyle {
        frameOverlap: 1
        tab: Rectangle {
        color: styleData.selected ? "steelblue" :"lightsteelblue"
        implicitWidth: Math.max(text.width + 4, 80)
        implicitHeight: 20
        radius: 2
        Text {
        id: text
        anchors.centerIn: parent
        text: styleData.title
        color: styleData.selected ? "white" : "black"
        }
        }
        frame: Rectangle { color: "steelblue" }
        tabBar: Rectangle { color: "red"; anchors.fill: parent }
        }
        anchors.fill: parent
        @
        I'm not at home so no guaranty and i don't know if the anchors property is needed.

        **Sorry for my english :)

        PLEASE ADD [SOLVED] TO YOUR THREAD TITLE IF IT'S SOLVED.**

        1 Reply Last reply Reply Quote 0
        • D
          DBoosalis last edited by

          Thanks that did the trick, rather difficult to do for a rather easy wand wanted setting. I would think this would be the default setting.

          Thanks again

          1 Reply Last reply Reply Quote 0
          • D
            dasRicardo last edited by

            Hmmm, i think this way is the most flexible option. For you a simple property is enough but someone maybe want a picture or a gradient or a video you named :) Try to find a property for every possible thing that peaple want to have is not possible. So let them use a component they can choose by her self. You know what i mean? And please, mark all your threads as solved if it's done :) Thx

            **Sorry for my english :)

            PLEASE ADD [SOLVED] TO YOUR THREAD TITLE IF IT'S SOLVED.**

            1 Reply Last reply Reply Quote 0
            • First post
              Last post