Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML tabButton styling
Forum Updated to NodeBB v4.3 + New Features

QML tabButton styling

Scheduled Pinned Locked Moved QML and Qt Quick
3 Posts 3 Posters 4.5k Views 1 Watching
  • 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.
  • B Offline
    B Offline
    bluestreak
    wrote on last edited by
    #1

    Hey,

    I've been having some trouble styling elements in qml, particularly the tabButton. I want to change the color of the button when it is pressed down, and perhaps its regular color too, but there seems to be no color attribute, and colorAnimation doesn't seem right. Any ideas on how to do this?

    1 Reply Last reply
    0
    • R Offline
      R Offline
      raaghuu
      wrote on last edited by
      #2

      you could make a rectangle inside the button... then you can set its color(with opacity<1) using the 'pressed' property of tab button... something like this:
      @
      TabButton {
      text: "tab"
      Rectangle {
      anchors.fill: parent
      color: ( parent.pressed ? "#f00000" : "#00d0d0" )
      opacity: 0.5
      }
      }
      @
      P.S. - There might be a better way to do this... But I don't know it...

      1 Reply Last reply
      0
      • M Offline
        M Offline
        mlong
        wrote on last edited by
        #3

        Looking at the TabButton.qml source can give some insights into how TabButton works.

        For instancs, from what I can tell in the version that I have handy (4.7.4 Desktop source tree in the SDK), there's a component called internal which encapsulates most of the component's magic. Inside there, it looks like there's a BorderImage called background which is the normal background image for the button. There's also one called pressedGraphics which is normally transparent, but which is made opaque during the button press to give the button a highlight.

        You may be able to drop in your own graphics by using something like:
        @
        yourTabButton.internal.background.source = "url to your background image";
        yourTabButton.internal.pressedGraphics.source = "url to your pressed image";
        @
        However, I haven't tried this (and it does break the bit of encapsulation there is and most likely would be considered by some to be naughty -- in the event that the internal implementation is different across platforms or versions or whatnot.) So YMMV and use at your own risk.

        Anyway, as I said before, you can get always get more definitive information from looking at the source code. At worst, it can give you an idea of how you might implement your own version of a TabButton which does exactly what you want... within licensing restrictions, etc., of course (IANAL).

        Software Engineer
        My views and opinions do not necessarily reflect those of anyone -- living or dead, real or fictional -- in this universe or any other similar multiverse node. Void where prohibited. Your mileage may vary. Caveat emptor.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved