Utilizing HTML and CSS, I have successfully implemented a solution to create scrollable tabs despite the feature not being readily available. The method outlined below has proven to be effective for me.
The tabs array can be configured with an unlimited amount of data.
It is important to note that scrolling may not work in the browser during development, but once the app is installed, it will function smoothly using swipes and also in Ionic view.
HTML code for the section:
<ion-header-bar class="bar bar-header row" align-title="center">
<!-- header code goes here -->
</ion-header>
<ion-nav-view>
<ion-content>
<!-- templates will be injected here -->
</ion-content>
</ion-nav-view>
<ion-footer-bar>
<div class="auFooter">
<div class="auFooterItem" ng-repeat="tab in tabs" id="tab{{tab.id}}" ng-class="{'IAmActive':tab.id===activeTabId}" ui-sref="{{tab.url}}" ng-click="change_tab({{tab.id}})">
<p>
<img src="{{tab.imageurl}}">
</p>
<p>
{{tab.title}}
</p>
</div>
</div>
</ion-footer-bar>
CSS FOR THE SAME NOTE: SASS is used for the CSS structure:
.pad0{
padding: 0 !important;
}
.padTop0{
padding-top: 0 !important;
}
.padBottom0{
padding-bottom: 0 !important;
}
.padLeft0{
padding-left: 0 !important;
}
.padRight0{
padding-right: 0 !important;
}
ion-footer-bar{
@extend .pad0;
.auFooter{
height: inherit;
background-color: #000F22;
padding: 0;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow:row;
position:absolute;
left: 0;
overflow-x: scroll;
.IAmActive{
background-color: #E68C00 !important;
}
.auFooterItem{
padding: 10px;
cursor: pointer;
color:white;
overflow: auto;
font-size:22px;
background-color: #000F22;//crimson;
border:1px solid #000710;
flex:1;
-webkit-flex:1;
text-align:center;
min-width:200px;
p{
margin-bottom: 0px;
font-size: 16px;
img{
height: 34px;
}
}
}
&::-webkit-scrollbar{
display: none;
}
}
}
.bar{
height: 60px;
}
.bar-footer{
height: 90px;
}
Javascript for changing the tab :
$scope.activeTabId='tab1';
$scope.change_tab=function(tabid){
$('#tab1').removeClass("IAmActive");
if($scope.activeTabId!==tabid){
$scope.activeTabId=tabid;
}
}
$scope.initTabs=function(){
$('#tab1').addClass("IAmActive");
}
setTimeout($scope.initTabs,500);
Sample JSON for tabs
$scope.tabs = [
{
"id":1,
"title" : 'Gallery',
"iconoff":'ion-ios-photos',
"iconon":'ion-ios-photos',
"url":'home',
"tabname":"tab-dash",
"imageurl":"img/icons/gallery.png"
},
{
"id":2,
"title" : 'Customer Enquiry Form',
"iconoff":'ion-android-contact',
"iconon":'ion-android-contact',
"url":'cenquiry',
"tabname":'tab-chats',
"imageurl":"img/icons/customer_enquiry.png"
},
{
"id":3,
"title" : 'Top 5',
"iconoff":'ion-android-star-half',
"iconon":'ion-android-star-half',
"url":'top5',
"tabname":'tab-top5',
"imageurl":"img/icons/top-5.png"
}
];