Git Product home page Git Product logo

ionic-3-swipe-able-segments's Issues

How to configure two segments

Hello,

The code works perfectly with 3 segments however there seems to be a problem when handling two segments. The swipe gesture has to be done like 3 or four times for it to work,

How does one go about with this?

thx

Facing Issue while Implementing Ionic 3 Swipe-able Segments

Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("

][tabsList]="categories" [(currentTab)]="category" (tabChanged)="onTabChanged($event)" class="swipe-ar"): ng:///AppModule/OngoingLeadsPage.html@24:42 Can't bind to 'currentTab' since it isn't a known property of 'div'. ("
][(currentTab)]="category" (tabChanged)="onTabChanged($event)" class="swipe-area"

Thanks in advance.

How to implement swipeable segments in ionic 3?

I have to implement swipeable segments in ionic 3 application.

I am using https://github.com/siddhartha-gupta/ionic-3-swipe-able-segments/tree/develop/src/pages directives but i am getting following error:

<ion-content padding>
 <div [ngSwitch]="category" swipeSegment [tabsList]="categories" 
  [ERROR ->][(currentTab)]="category" 
  (tabChanged)="onTabChanged($event)" class="swipe-area">
 <ion-list *ngSw"): 
 ng:///InvitefriendPageModule/InvitefriendPage.html@60:66
 Error: Template parse errors:
Can't bind to 'tabsList' since it isn't a known property of 'div'. ("

<ion-content padding>
 <div [ngSwitch]="category" swipeSegment [ERROR ->] . 
  [tabsList]="categories" [(currentTab)]="category" 
  (tabChanged)="onTabChanged($event)" class="swipe-ar"): 
   ng:///InvitefriendPageModule/InvitefriendPage.html@60:42
  Can't bind to 'currentTab' since it isn't a known property of 'div'.

("

    <ion-content padding>
][(currentTab)]="category" (tabChanged)="onTabChanged($event)" class="swipe-area"> ) at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:114070:19) at http://localhost:8100/build/vendor.js:113940:19 at Object.then (http://localhost:8100/build/vendor.js:80040:77) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:113939:26) at c (http://localhost:8100/build/polyfills.js:3:19752) at Object.reject (http://localhost:8100/build/polyfills.js:3:19174) at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:51781:16) at NavControllerBase._failed (http://localhost:8100/build/vendor.js:51774:14) at http://localhost:8100/build/vendor.js:51821:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://localhost:8100/build/vendor.js:5134:33) at t.invoke (http://localhost:8100/build/polyfills.js:3:14916) at r.run (http://localhost:8100/build/polyfills.js:3:10143) at http://localhost:8100/build/polyfills.js:3:20242 My code is:

In app.module.ts:

 import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';

 @NgModule({
 declarations: [
   MyApp,
   SwipeSegmentDirective
   // ProgressBarComponent
 ],

In invitefriend.ts:

export class InvitefriendPage {

 public category: string = 'everyone';
 public categories: Array<string> = ['everyone', 'group', 'contact', 
 'directory']

 // tab1Root: any = "EveryonePage";
 // tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact', 
'directory']

 constructor(public navCtrl: NavController, public navParams: 
  NavParams) {
 }

 ionViewDidLoad() {
  console.log('ionViewDidLoad InvitefriendPage');
 }

 onTabChanged(tabName) {
  this.category = tabName;
 }

In invitefriend.html:

 <ion-header>
  <ion-navbar color="danger">   
   <ion-grid>
    <ion-row>
     <ion-col col-2 col-xl-2 class="wholeCol">
      <img src="assets/imgs/iconRn.png" class="iconHeader" item-start>
     </ion-col>
     <ion-col col-9 col-xl-9>
      <ion-grid class="search-css">
       <ion-row>
        <ion-col col-2 col-xl-2 class="search-div">
         <img src="assets/imgs/search.png" class="img-css">
        </ion-col>
        <ion-col col-10 col-xl-10>
          <ion-input type="text" (ionInput)="getItems($event)" 
            [(ngModel)]="searchTerm" class="inputSearch" 
             placeholder="Search by name"></ion-input>
           </ion-col>
          </ion-row>
         </ion-grid>

        </ion-col>
        <ion-col col-1 col-xl-1 class="colSetting">
         <img src="assets/imgs/close.png" class="iconclose" 
            (click)="closePage()">
         </ion-col>
        </ion-row>
       </ion-grid>

<ion-toolbar class="toolbar-color myToolbar">
 <ion-segment [(ngModel)]="category" class="tabsSeg">

  <ion-segment-button value="everyone" class="segBtn tabname 
    active activated">
     Everyone
  </ion-segment-button>
  <ion-segment-button value="group" class="segBtn tabname">
    Group
  </ion-segment-button>
  <ion-segment-button value="contact" class="segBtn tabname">
    Contact
  </ion-segment-button>
  <ion-segment-button value="directory" class="segBtn tabname">
    Directory
  </ion-segment-button>
</ion-segment>

 <ion-content padding>
   <div [ngSwitch]="category" swipeSegment [tabsList]="categories" 
    [(currentTab)]="category" (tabChanged)="onTabChanged($event)" 
     class="swipe-area">
   <ion-list *ngSwitchCase="'everyone'">
    <ion-item>
      Batman Begins
     </ion-item>
      <ion-item>
      Transporter
     </ion-item>
     <ion-item>
      Million Dollar Baby
      </ion-item>
     </ion-list>

     <ion-list *ngSwitchCase="'group'">
      <ion-item>
        Game of Thrones
      </ion-item>
      <ion-item>
        Daredevil
       </ion-item>
       <ion-item>
        Arrow
       </ion-item>
     </ion-list>

    <ion-list *ngSwitchCase="'contact'">
     <ion-item>
       Ice Age
     </ion-item>
      <ion-item>
      Lion King
      </ion-item>
      <ion-item>
         Up
     </ion-item>
     </ion-list>

      <ion-list *ngSwitchCase="'directory'">
     <ion-item>
      Ice Age1
       </ion-item>
       <ion-item>
       Lion King1
      </ion-item>
       <ion-item>
        Up1
     </ion-item>
    </ion-list>
   </div>
  </ion-content>

I need any solution to solve above error, please give here solution as soon as possible, it would be really appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.