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

a.burks

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?

a.burks

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