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

Elide of tab title in TabView



  • I am newbie...

    Just tried to modify the Qt example "Qt Quick Controls - gallery" for my needs. Its Styles.qml comes with the following code, and I just added one line to define the "elide" property of Text, which turned out has no effect. Any suggestions?

    @ property Component tabViewStyle: TabViewStyle {
    tabOverlap: 16
    frameOverlap: 4
    tabsMovable: true

        frame: Rectangle {
            gradient: Gradient{
                GradientStop { color: "#e5e5e5" ; position: 0 }
                GradientStop { color: "#e0e0e0" ; position: 1 }
            }
            border.color: "#898989"
            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
        }
        tab: Item {
            property int totalOverlap: tabOverlap * (control.count - 1)
            implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
            implicitHeight: image.sourceSize.height
            BorderImage {
                id: image
                anchors.fill: parent
                source: styleData.selected ? "../images/tab_selected.png" : "../images/tab.png"
                border.left: 30
                smooth: false
                border.right: 30
            }
            Text {
                text: styleData.title
                anchors.centerIn: parent
                elide: Text.ElideLeft  //---------------> my modification
            }
        }
        leftCorner: Item { implicitWidth: 12 }
    }@

  • Qt Champions 2017

    text: styleData.title - what is the size of this ? Is it multi-line ?
    Can you look at the following bug ?

    https://bugreports.qt-project.org/browse/QTBUG-31414?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel



  • The text elide mode has no effect unless you constrain the size of your text item. By default a Text item has the size it needs to show the text without elide. If you instead of anchors.center in your text item, set anchors.left and anchors.right to the parent, it will force the text item to elide.


Log in to reply