How to set different border width for top,bottom?

BadOmen

Do I need to use BorderImage and make a image containing a borde to specify left,top,right and bottom border width?

I would prefer to just set the borders with something like this, border.top.width:2 or border.top.color:"blue". and then change the state of the button to make a down/up button state.

Is it possible to do something like this without the use of another image?

ngrosjean

-You could perhaps create a "myStyle.qss" sheet file and then launch your application with the --stylesheet myStyle.qss option? Something like :-

@QWidget {border : 0px solid blue;
border-top : 2px solid red;
border-bottom : 4px solid yelow;
}@

Edit : sorry, you right, it's not a solution for Qt Quick.

BadOmen

Hi,
I am really new to this but I don't think that is working on qml Elements, at least I don't know how to make it work.

andre

You are right, ngrosjean is refering to the CSS styling system for widgets. I don't know how this would work in the Quick world.

BadOmen

Okay, thank you.
Hope someone know of a neat way of doing it :)

shullw

I don't know about the left and right side, but you could use a gradient for this inside of the rectangle. It isn't an image, but you could set a very small gradient at the top and bottom which would be conditional on the Onpressed option. If you need a fuller code example let me know. This would easily pull off what you are looking for I believe.

On further reading I saw you don't want this on just pressed, so what you would have to do with the rectangle is make a bool variable. Then set it to true or false when the button is clicked or active if you will. Then you could set the color on the true and false of that variable. Say you name the variable active in a rectangle id: Rect Your gradient color code would look something like this.
@
color: Rect.active ? "blue" : "white"
@
See this for the rest of the gradient help. "http://doc.qt.nokia.com/4.7-snapshot/qml-gradient.html":http://doc.qt.nokia.com/4.7-snapshot/qml-gradient.html

BadOmen

That sounds interesting, not perfect but at least it will do for now. I would like a perfect 3d pushButton effect. =)

Can you pleas give me the full code example, I am not good with gradients. I never manage to make them look the way I want, not even close =)

BadOmen

I have fixed the gradient part but I read that it is not a good thing to change a gradient with a state change. So I don't think this is a working solution for me.

This is what I have read:
"http://www.mail-archive.com/qt-qml@trolltech.com/msg01602.htm":http://www.mail-archive.com/qt-qml@trolltech.com/msg01602.html

BadOmen

shullw: I see you did not mentioned states... =) I have found an example that I have changed to look as something you tried to explain to me :)
@
import Qt 4.7

Rectangle {
id: container

 //property variant text
 signal clicked

 height: text.height + 10; width: text.width + 20
 //border.width: 1
 radius: 4
 smooth: true

 gradient: Gradient {
     GradientStop {
         position: 0.0
         color: !mouseArea.pressed ? "gray" : "darkgray"
     }
     GradientStop {
         position: 0.1
         color: "black"
     }
     GradientStop {
         position: 0.9
         color: "black"
     }
     GradientStop {
         position: 1.0
         color: !mouseArea.pressed ? "darkgray": "gray"
     }
 }


 MouseArea {
     id: mouseArea
     anchors.fill: parent
     onClicked: container.clicked()
 }

 Text {
     id: text
     //anchors.centerIn:parent
     font.pointSize: 10
     y:!mouseArea.pressed ? parent.height/2 - text.height/2-2+2:parent.height/2 - text.height/2 +1
     x:parent.width/2 - text.width/2
     text: "Click Me"
     color: "white"
 }

}
@