qt - Extending TabViewStyle styleData -

i trying find nicer way this, add icon tab. right piggy backing off styledata.title include icon source, nice able extend styledata can include other custom properties.

here current hack:

tab {     ...     title: "home|images/home-75.png"     ... }  style: tabviewstyle {     ...     tab: rectangle {         ...         text {             ...             text: styledata.title.split("|")[0]             ...         }         image {             ...             source: styledata.title.split("|")[1]         }     } } 

however nicer this:

tab {     ...     title: "home"     source: "images/home-75.png"     ... }  style: tabviewstyle {     ...     tab: rectangle {         ...         text {             ...             text: styledata.title             ...         }         image {             ...             source: styledata.source         }     } } 

here application markup is:

import qtquick 2.2 import qtquick.window 2.1 import qtquick.layouts 1.1 import qtquick.controls 1.1 import qtquick.controls.styles 1.1  applicationwindow {     visible: true     width: 320     height: 480      tabview {         id: tabwidget         x: 0         y: 0         tabposition: qt.bottomedge         width: parent.width         height: parent.height          tab {             id: hometab             title: "home|images/home-75.png"             source: "images/home-75.png"             component: qt.createcomponent("page2.qml")         }          tab {             id: inboxtab             title: "inbox|images/home-75.png"             component: qt.createcomponent("page3.qml")         }          tab {             id: outboxtab             title: "outbox"             source: "images/home-75.png"             component: qt.createcomponent("page3.qml")         }          tab {             id: settingtab             title: "settings"             source: "images/home-75.png"             component: qt.createcomponent("page3.qml")         }          style: tabviewstyle {             frameoverlap: 0             tab: rectangle {                 color: "#f6f6f7"                 border.width: 0                 implicitwidth: (parent.control.width + 3) / 4                 implicitheight: 88                 radius: 0                 customborder                 {                     commonborder: false                     lborderwidth: 0                     rborderwidth: 0                     tborderwidth: 1                     bborderwidth: 0                     bordercolor: "#bababc"                 }                 text {                     id: text                     anchors.bottom: parent.bottom                     anchors.horizontalcenter: parent.horizontalcenter                     text: styledata.title.split("|")[0]                     color: styledata.selected ? "#ff3b30" : "#8e8e8f"                 }                 image {                     id: img                     width: 75                     height: 75                     source: styledata.title.split("|")[1]                 }             }         }     } } 

create component icontab.qml

import qtquick 2.2 import qtquick.controls 1.1  tab {     property url iconsource } 

then replace tabs width icontabs, e.g.

icontab {     id: outboxtab     title: "outbox"     iconsource: "images/home-75.png" } 

and icon's source in tabviewstyle via:

component.oncompleted: {     console.log("title: " + styledata.title)     console.log("title: " + tabwidget.gettab(styledata.index).title)     console.log("icon: " + tabwidget.gettab(styledata.index).iconsource) } 

btw. check out documentation tab.source , tab.sourcecomponent. tab.component should not work. @ least, not documented.