ButtonStyle in sepperate QML File

[hpollak]

I try to use ButtonStyle in my Application, but i want to but the style in a sepperate QML-File so the Code look like

...
import "qrc:/styles/qml/Styles"
...

Button {
               id: prjSave
               x: 4 * projectRec.tabWidth
               anchors.top: projectState.bottom
               anchors.topMargin: 5
               iconSource: "qrc:/icons/resources/document-save-as-3.png"
               text: "&Save Project.."

               style: MyButtonStyle {}

           }

MyButtonStyle.qml:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

ButtonStyle {
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 25
        border.width: control.activeFocus ? 2 : 1
        border.color: "#888"
        radius: 4
        color: "#1f1f1f"

    }
}

I like to change the Text-color of the Button within the Style,

But when i add

    label: Label {
        color: "#9f9f9f"
    }

To the Style.qml the Button shows no Icon, no Text it still shows the Background.

Is there a way to change only the textcolor of a button within a Style.qml?

[p3c0]

Hi @hpollak,
Are you adding label inside ButtonStyle component in MyButtonStyle.qml ? How does MyButtonStyle.qml look like after adding label ?

[JijuCyriacManjooran]

the Label instance does not know what text to show . You need to bind it with the button's text.

label: Label {
color: "#9f9f9f"
text: control.text
}

[RamK]

If you make use of custom style using ButtonStyle , you will be able to access Button's properties using ButtonStyle.control property.

To text to be get displayed with custom style it you need to map with control.text.

In your button code you are setting Button.iconSource also ... which will not be visible if you set custom button style.
[ By setting custom button style we are going to lose default button platform style]

To have Icon and Text you need to combine them and set to ButtonStyle.label component.

Rectangle{

    id: rootRect
    width: 400
    height:400
    Button {
        id: myButton
        width:200
        height:40
        x: 50;y:50
        iconSource: "images/arrow.png"
        text: "&button Text"

        style: ButtonStyle{}

    }
}

ButtonStyle in separate file

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3

ButtonStyle {
    id:mybuttonStyle
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 25
        border.width: control.activeFocus ? 2 : 1
        border.color: "red"
        radius: 4
        color: "lightblue"
    }
    label: Component{
        id:labelCompoent
        Row{
            anchors.left: parent.left
            anchors.leftMargin: (parent.width - (text.width + image.width))/2
            anchors.top: parent.top
            anchors.topMargin: 2
            spacing: 0
            Image{ id:image ;source: control.iconSource}
            Label{
                id:text
                height: 30
                width:100
                horizontalAlignment:Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                color: "magenta"
                text: control.text
            }
        }
    }
}

[p3c0]

@RamK Surround you code with ``` (3 backticks). I have done it for you now.

[RamK]

@p3c0 Thanks for updation.

[hpollak]

Thanks - The code from RamK is the solution.

control. ... is the crux.

Best regards
Harry