Styling a checkbox

GrahamLa

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

Gojir4

@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"
    }
}

GrahamLa

@Gojir4
I also need to provide an image for the indicator

            CheckBox {
                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
                        }
                    }

                }