Remove space between TabButton in TabBar

efdiloreto

How to remove the white space between the buttons? i can't find the correct property...

alt text

This is my code:

Boton.qml:

TabButton {
    onCheckedChanged: canvas.requestPaint()

    contentItem: Text {
        antialiasing: false
        text: parent.text
        font.family: "monofonto"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: "#19F51E"
    }
    background: Rectangle{
        color: 'black'
    }
    Canvas{
        id: canvas
        width: parent.width
        height: parent.height
        onPaint: {
            var ctx = getContext("2d");
            ctx.reset()
            ctx.lineWidth = 5;
            ctx.strokeStyle = "#19F51E";
            ctx.beginPath()
            if (parent.checked){
                ctx.moveTo(0, 0)
                ctx.lineTo(width, 0)
            } else {
                ctx.moveTo(0, height)
                ctx.lineTo(width, height)
            }
            ctx.stroke()
        }
    }
}

Main.qml:


Window{
    color: 'black'
TabBar {
    width: parent.width
    anchors.margins: 0
    Boton {
        text: "BUTTON"
    }
    Boton {
        text: "BUTTON"
    }
    Boton {
        text: "BUTTON"
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}
}

IntruderExcluder

Set spacing property to 0.

Markkyboy

This post is deleted!

IntruderExcluder

Set spacing property to 0.

efdiloreto

@IntruderExcluder

Thanks! that works.