Swipble tabs in ionic 3
HTML :
<ion-header>
<ion-navbar color="primary">
<button *ngIf="!isOn" ion-button menuToggle icon-only color="light" clear>
<ion-icon name='menu'></ion-icon>
</button>
<ion-title *ngIf="!isOn">Bigbasket</ion-title>
<ion-searchbar *ngIf="isOn"></ion-searchbar>
<ion-buttons end (click)="toggleDetails()">
<button ion-button icon-only>
<ion-icon *ngIf="isOn" name="close" (click)="toggleON()"></ion-icon>
<ion-icon *ngIf="!isOn" name="search" (click)="toggleON()"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end (click)="opneHome()">
<button ion-button icon-only>
<ion-icon name="cart"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content #scroll scrollX="true" scrollY="false" style="height: 50px;">
<ion-segment class="SwipedTabs-tabs" >
<ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
[ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider && ( this.SwipedTabsSlider.getActiveIndex() === i || ( tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' [ngStyle]="{'width.px': (this.tabElementWidth_px)}" >
{{tab}}
</ion-segment-button>
</ion-segment>
<!-- here is our dynamic line "indicator"-->
<div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]="{'width.px': (this.tabElementWidth_px)}" ></div>
</ion-content>
</ion-header>
<ion-content >
<ion-slides #SwipedTabsSlider (ionSlideDrag)="animateIndicator($event)"
(ionSlideWillChange)="updateIndicatorPosition()"
(ionSlideDidChange)="updateIndicatorPosition()"
(pan)="updateIndicatorPosition()"
[pager]="false"
>
<ion-slide>
<h1>Page 1 </h1>
</ion-slide>
<ion-slide>
<h1>Page 2 </h1>
</ion-slide>
<ion-slide>
<h1>Page 3 </h1>
</ion-slide>
<ion-slide>
<h1>Page 4 </h1>
</ion-slide>
<ion-slide>
<h1>Page 5 </h1>
</ion-slide>
<ion-slide>
<h1>Page 6 </h1>
</ion-slide>
<ion-slide>
<h1>Page 7 </h1>
</ion-slide>
<ion-slide>
<h1>Page 8 </h1>
</ion-slide>
<ion-slide>
<h1>Page 9 </h1>
</ion-slide>
<ion-slide>
<h1>Page 10 </h1>
</ion-slide>
<ion-slide>
<h1>Page 11 </h1>
</ion-slide>
<ion-slide>
<h1>Page 12 </h1>
</ion-slide>
</ion-slides>
</ion-content>
scss :
page-cotegory {
.content-md {
color: #000;
background-color: #eee;
}
.searchbar-md .searchbar-input {
color: #fff;
background-color: #488aff;
-webkit-box-shadow:none;
box-shadow:none;
}
::-webkit-input-placeholder {
color: #fff !important;
}
.searchbar-md .searchbar-search-icon {
left: 16px;
top: 11px;
background-image: url(../assets/imgs/loop.png);
}
.searchbar-md .searchbar-clear-icon {
right: 13px;
top: 0;
background-image: none;
}
.bar-button-md[icon-only] {
padding: 7px;
}
.SwipedTabs-indicatorSegment
{
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
transform-origin: top 0 left 0;
height: 1px;
position: relative;
top: -2px;
background-color: blue !important;
}
.SwipedTabs-tabs ion-segment-button
{
border:none !important;
color:green!important;
background-color:#eee!important;
}
.SwipedTabs-tabs ion-segment-button.SwipedTabs-activeTab
{
color:blue !important;
}
.SwipedTabs-tabs
{
width: fit-content !important;
border-bottom: solid 1px #eee !important;
}
}
TS :
import { Component,ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Slides , Content} from 'ionic-angular';
/**
* Generated class for the CoregoryPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-cotegory',
templateUrl: 'cotegory.html',
})
export class CotegoryPage {
@ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides ;
@ViewChild('scroll') scroll: Content;
SwipedTabsIndicator :any= null;
tabElementWidth_px :number= 50;
tabs:any=[];
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.tabs=["p1","p2","p3","p4","p5","p6","p7","p8","p9","p10","p11","p12"];
}
ionViewDidLoad() {
console.log('ionViewDidLoad CoregoryPage');
}
private isOn: boolean = false;
getButtonText(): string {
return `Switch ${ this.isOn ? 'Off' : 'On' }`;
}
setState(): void {
this.isOn = !this.isOn;
}
toggleDetails() {
this.isOn = !this.isOn;
}
toggleON() {
this.isOn = !this.isOn;
}
opneHome(){
this.navCtrl.setRoot('HomePage');
}
openList(){
this.navCtrl.push('ListPage')
}
opneAllOffers(){
this.navCtrl.push('AlloffersPage')
}
opneCotegory(){
this.navCtrl.push('AllcotegoryPage')
}
ionViewDidEnter() {
this.SwipedTabsIndicator = document.getElementById("indicator");
}
selectTab(index) {
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(100*index)+'%,0,0)';
this.scroll.scrollTo(index*this.tabElementWidth_px,0,500);
this.SwipedTabsSlider.slideTo(index, 500);
}
updateIndicatorPosition() {
this.scroll.scrollTo(this.SwipedTabsSlider.getActiveIndex()*this.tabElementWidth_px,0,200);
// this condition is to avoid passing to incorrect index
if( this.SwipedTabsSlider.length()> this.SwipedTabsSlider.getActiveIndex())
{
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d('+(this.SwipedTabsSlider.getActiveIndex() * 100)+'%,0,0)';
}
}
animateIndicator($event) {
if(this.SwipedTabsIndicator)
this.SwipedTabsIndicator.style.webkitTransform = 'translate3d(' + (($event.progress* (this.SwipedTabsSlider.length()-1))*100) + '%,0,0)';
}
}
Comments
Post a Comment