using icons AND formatting text with buttons

mzimmers

Hi all -

I need to implement some buttons with icons and text. I'm hitting some formatting problems:
(1)
It appears that using:

display: AbstractButton.TextBesideIcon

means I can't (directly) use a Label for my text. I can sort of use a Label like this:

RoundButton {
   Label {
      id: label
      visible: false
      text: "REAGENTS"
      color: 'white'
   }
   text: label.text
   icon.source: '/images/warning_24px.svg'
   icon.color: 'white'
   display: AbstractButton.TextBesideIcon
}

Which gives me the actual text, but not the ability to do anything with it (like set the color). Plus, I don't think this is the desired approach anyway. Suggestions?

(2)
My attempts at using the icon file are producing a big FAIL (this is supposed to be a triangle with a bang sign) :

The icons supplied by our designer are in .svg format; should I ask for something else?

Thanks...

ndias

Hi @mzimmers

I think the lines bellow provide the result you are expecting:

import QtQuick.Controls.Material

RoundButton {
   Material.foreground: "white" // (text color)
   text: "REAGENTS"
   icon.source: 'file:Resources/Tools-icon.png'
   icon.color: "transparent"
   //display: AbstractButton.TextBesideIcon
}

or based on https://forum.qt.io/topic/127468/using-icons-and-formatting-text-with-buttons/2

    RoundButton {
        id : iconButton
        text: "REAGENTS"
        icon.source: 'file:Resources/Tools-icon.png'
        icon.color: "transparent"

        height: 55
        width: 120

        contentItem:Item {
            Row {
                spacing : iconButton.width*0.05
                anchors.centerIn: parent
                Image {
                    id: menuButtonIcon
                    source: iconButton.icon.source
                    anchors.verticalCenter: parent.verticalCenter
                    width: iconButton.icon.width
                    height: iconButton.icon.height
                }
                Text {
                    text: iconButton.text
                    anchors.verticalCenter: parent.verticalCenter
                    color: "white"
                }
            }
        }

Best Regards

mzimmers

@ndias thanks for the suggestions. I've tried both:

The first example doesn't change the text color to white for me.

The second example doesn't display the icon, probably because I haven't given it a color. The icon is an .svg file, and I had to give it a color (white) in the first example. I'm not sure I can use the Image component with this file.

(I swapped the order of the text and icon in the second example, because that's how the designer wants it.)

If you have any other ideas, I'd love to hear them.

Thanks...

flowery

@mzimmers Did you get any error that the image file is missing in second example.In that case please check the path.

mzimmers

@flowery no, no error. The path is the same for both buttons:

    RoundButton {
        id: reagentButton1
        Material.foreground: textAndIconColor
        text: buttonText
        icon.source: iconSource
        icon.color: textAndIconColor
        anchors.top: spacer1.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        background: Rectangle {
            color: warningColor
            radius: parent.radius
        }
    }

    RoundButton {
        id: reagentButton2
        height: buttonHeight
        width: buttonWidth
        anchors.horizontalCenter: parent.horizontalCenter
        text: buttonText
        background: Rectangle {
            color: warningColor
            radius: reagentButton2.radius
        }
        contentItem:Item {
            Row {
                spacing : reagentButton2.width * 0.05
                anchors.centerIn: parent
                Text {
                    text: reagentButton2.text
                    anchors.verticalCenter: parent.verticalCenter
                    color: textAndIconColor
                }
                Image {
                    id: menuButtonIcon
                    source: root.iconSource
                    anchors.verticalCenter: parent.verticalCenter
                    width: reagentButton2.icon.width
                    height: reagentButton2.icon.height
                }
            }
        }
    }

I think it has to do with the fact that this is an uncolored .svg file, and, while I can assign a color to an icon property of a button, I can't do the same for an Image. Just not sure how to work around this one.

mzimmers

@ndias in looking at this a bit more, I think (at least part of) the problem is that I haven't defined a Qt Quick Control Style. Did you define a style (presumably Material) on your system?