Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to truncate a text of a button with a fade out effect?



  • I use a GridView with buttons. Each of them has an icon and text. If the text is too long for the grid, I want to truncate it preferably with a face our effect instead of three dots.

     Button {
          text: model.label
          icon.source: model.source
          ...
     }
    

    If I define a ButtonStyle with a Text for the label property, I could use the elide property, but this only allows the old style with three dots.

    Maybe a solution is possible with the LinearGradient QML Type. The question would be? What would be the source reference?



  • This is my solution:

    First I had to customize my button. It's important to adjust the alignment for long text values, that should be clipped.

    Button {
        id: myButton
        text: model.label
        contentItem: Column {
            Image {
                ...
            }
            Label {
                 width: myButton.width - innerSpacing
                 horizontalAlignment: contentWidth > myButton.width - innerSpacing ? Text.AlignLeft : Text.AlignHCenter
                text: myButton.text
                clip: true
            }
        }
    }
    

    Than I have to add a visual effect:

    LinearGradient {
        height: myButton.height
        width: myButton.width
        start: Qt.point(parent.width - innerSpacing)
        end: Qt.point(parent.width,0)
        gradient: Gradient {
             GradientStop {
                position: 0.0
                color: "#00000000" // tranparency
             }
             GradientStop {
                 position: 1.0
                 color: "#FF000000"
             }
        }
    }


  • This is my solution:

    First I had to customize my button. It's important to adjust the alignment for long text values, that should be clipped.

    Button {
        id: myButton
        text: model.label
        contentItem: Column {
            Image {
                ...
            }
            Label {
                 width: myButton.width - innerSpacing
                 horizontalAlignment: contentWidth > myButton.width - innerSpacing ? Text.AlignLeft : Text.AlignHCenter
                text: myButton.text
                clip: true
            }
        }
    }
    

    Than I have to add a visual effect:

    LinearGradient {
        height: myButton.height
        width: myButton.width
        start: Qt.point(parent.width - innerSpacing)
        end: Qt.point(parent.width,0)
        gradient: Gradient {
             GradientStop {
                position: 0.0
                color: "#00000000" // tranparency
             }
             GradientStop {
                 position: 1.0
                 color: "#FF000000"
             }
        }
    }

Log in to reply