Help with buttons please
-
Design issues:
I am building a setup wizard and I am looking for some suggestions and some help with how to implement the buttons. Currently, the wizard has three buttons:
"Cancel" (blue)
"Save and Exit" (blue)
"Next" which changes to "Finished" on the last page. (blue unless they don't have the option of clicking it in which case it is gray because it isdisabled
)I feel like each button should be a different color perhaps? For instance, "Cancel" could be red, "Save and Exit" could be gray and "Next" could be green. However, since the "Next" button can be gray when it isn't allowed to be clicked I don't want the user thinking that "Save and Exit" isn't allowed to be clicked when it is. So perhaps "Cancel" should be red and both "Save and Exit" and "Next" should be green? Perhaps I should have a color change when hovered or clicked?
Functionality issues:
Here is an example of what I can figure out with
Button
Button { id: cancelButton width: 150 height: 50 contentItem: Text { text: qsTr("Cancel") font: theme ? theme.pushButton.font : internal.font color: "white" horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter } background: Rectangle { radius: 5 color: cancelButton.down ? "blue" : "red" } onClicked: { //on clicked logic goes here } }
Currently I am not using the color switch shown in
Rectangle
but I could if it is suggested. The only thing I can't figure out how to do is alter the color of the text or rectangle when the button is being hovered, how might I do that? Is it even possible? -
There might be another way, but I use a mousearea for that:
https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#hoverEnabled-prop -
There might be another way, but I use a mousearea for that:
https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#hoverEnabled-prop -
QuckControls 2 already have
hovered
andhoverEnabled
properties, using MouseArea is unnecessary. -
QuckControls 2 already have
hovered
andhoverEnabled
properties, using MouseArea is unnecessary.@IntruderExcluder Right, I noticed that as well and am not using
mouseArea
.