PDA

View Full Version : highlight button with dashed line when focus is set by tab



jfinn88
22nd September 2016, 20:17
I want to have a dashed line appear around the current button that has the focus set to it? Like when you tab through fire fox....

Is there a way to do this?



Button {
id: searchBtn
text: qsTr("Search")
action: action_search
opacity: !action.enabled ? .3 : 1.0
KeyNavigation.tab: resetBtn

onFocusChanged {
border.color: "yellow"
border.width: 2
}

//---Sets button Formatting---//
style: ButtonStyle {
background: Rectangle {
implicitWidth: 90
implicitHeight: 40
anchors.fill:parent
radius: 4
//---Changes butotn color when pressed--//
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
//---Sets button Image---//
Image{
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
source:"button_ok.png"
}
}
}
}



update: found a solution:



border.color: control.activeFocus ? "yellow" : "#242424"
border.width: control.activeFocus ? 4 : 1