ButtonStyle in sepperate QML File



  • 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?


  • Moderators

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



  • 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
    }



  • 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
                }
            }
        }
    }
    

  • Moderators

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



  • @p3c0 Thanks for updation.



  • Thanks - The code from RamK is the solution.

    control. ... is the crux.

    Best regards
    Harry



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.