Customize ion-tab menu content with personal button

ionic-v1
1

Hi all guy, working with ionic 1 tabs project, i would like to customize my tab menu button like shown in the image below.

[](Custom Tabs)

How can i process to integrate my component in the ion-tab tag ?

Thanks

2

Nobody to help me solve this problem ??

3

i have made a small directive for it . just add tab-Button attribute to ion-tabs tag.

.directive(‘tabButton’, function($compile) {
return {
restrict: ‘A’,
replace: true,
link: function($scope, elem, attrs) {
var d = parseInt(elem.children().children().length/2);
c = parseInt(d/2);
d = d + c -1;
var button = $compile(’<button class="button icon ion-plus"></button>’)($scope);
elem.children().children()[d].after(button[0]);
}
};
});

add css in $compile as your requirement
image

4

@harshit886 thanks for your answer. It save my time. I’m adding some css to get above result.