Styling a checkbox
Solved
QML and Qt Quick
-
Hi
I want to style a checkbox so it just displays a border, so I followed the example in the documentation// CheckBox { id: checkBox anchors.verticalCenter: parent.verticalCenter visible: model.checkbox style: CheckBoxStyle { indicator: Rectangle { implicitHeight: 16 implicitWidth: 16 border.color: "red" color: "transparent" Rectangle { visible: control.checked color: "#555" border.color: "#333" radius: 1 anchors.margins: 4 anchors.fill: parent } } } }
This does give me a checkbox with a border, however the indicator is now a rectangle within the checkbox, because of the second rectangle definition. Without this definition I cannot 'check' the box, but my requirement is to show a 'tick' when checked (default without styling)
So I do I style my check box but retain the tick for checked boxes?
Thanks -
@GrahamLa Hi,
According to Customizing CheckBox.
I guess you only need to define
background
in your style and put then your rectangle with border inside.style: CheckBoxStyle { background: Rectangle { implicitHeight: 16 implicitWidth: 16 border.color: "red" color: "transparent" } }
-
@Gojir4
I also need to provide an image for the indicatorCheckBox { id: checkBox checked: true anchors.verticalCenter: parent.verticalCenter visible: model.checkbox style: CheckBoxStyle { indicator: Rectangle { implicitHeight: 16 implicitWidth: 16 border.color: "#22add8" color: "transparent" Image { x: (parent.width - width) / 2 y: (parent.height - height) / 2 source: "images/tick.png" visible: checkBox.checked } } }