Solved 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 aText
for the label property, I could use theelide
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" } } }