AbstractButton TextUnderIcon and ability to customize text

RickS

I'm working in a QML project with Qt 5.15.2, sorry in advance since I'm new with the language.

I have a custom style for a ToolButton called CustomLargeButton. This is how CustomLargeButton is defined:

ToolButton{
    display: AbstractButton.TextUnderIcon

    property url iconSource
    width: Theme.sizeSmall*10
    height: Theme.sizeSmall*10
    font.pixelSize: Theme.fontSizeSmall

    icon{
        source: iconSource
        color: enabled? Theme.colorPrimary : Theme.colorDisabled
        height: width/2
        width: width/2
    }
}

By calling to CustomLargeButton and setting the text, as the TextUnderIcon property is set, the text is properly shown under the icon.

CustomLargeButton{
                    width: Theme.sizeLarge
                    height: Theme.sizeLarge
                    anchors.centerIn: parent
                    text: theText
                    iconSource: theIcon
                }

I'd like to know if it's possible to alter the text settings for that text that is shown under the icon and if so, any tips on how to do that.

Thank you.

IntruderExcluder

Depends on what are want to do. Text inside ToolButton inherits its control's options. So you can, for example, set custom font property to your CustomLargeButton.

RickS

OK thank you. So, apart from setting the font or text color, if for example I wanted any other customizations like text wrapping, I should add my own text label to the custom button and avoid the TextUnderIcon one.

IntruderExcluder

In this case you can override contentItem property at your CustomLargeButton.qml and set whatever you want. TextUnderIcon is just an enum for text display mode.

RickS

But how to keep the icon and a custom text? For example:

If I add a contentItem text as in this code:

ToolButton{
    id: toolButton
    display: AbstractButton.TextUnderIcon

    property url iconSource
    width: Theme.sizeSmall*10
    height: Theme.sizeSmall*10
    font.pixelSize: Theme.fontSizeSmall

    icon{
        source: iconSource
        color: enabled? Theme.colorPrimary : Theme.colorDisabled
        height: width/2
        width: width/2
    }
    contentItem: Text {
        text: toolButton.text
        font: toolButton.font
    }
...

Then the icon is lost and only the text is displayed.

I tried contentItem: IconLabel but it is shown as component not found.

IntruderExcluder

You can set contentItem as Row with Image and Text elements:

...
contentItem: Row {
    Image {...}
    Text {...}
}

RickS

OK I'm testing how it goes with a Row in contentItem. One of the issues I'm having is that I'm losing the nice icon scaling that is achieved with the ToolButton icon: the svg image is not scaled in the same way with an Image element and it appears blurry (or most probably I'm missing something). But that's an issue for another thread.

Thank you.

IntruderExcluder

Try to play with sourceSize property of Image.