Have TabButton get its own index

Question

Another question shows how to change the color of a TabButton depending on if it is the current index:

color: tabBar.currentIndex == 1 ? "purple" : "lightblue"

However, this requires hard-coding each button with currentIndex == 0 then currentIndex == 1. It seems like each button or its parent layout should know what its index is. I would like to introduce CustomTabButton control with a LOT of customization for visuals and have two options:

1. Add a property to the CustomTabButton called index and then set it individually
2. Programmatically get the index to avoid hard coding 1,2,3... for checking if it is the current index.

Is there a proper way?

Answer 1

index is an attached property from TabBar.

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "AAA" : "aaa"
    }
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "BBB" : "bbb"
    }
    TabButton {
        text: (bar.currentIndex == TabBar.index) ? "CCC" : "ccc"
    }
}