QML tabButton styling
-
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?
-
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...
-
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).
